Template talk:Block center

Latest comment: 5 years ago by JustinCB in topic Optional width component?

should we utilize css3 yet? edit

Which is better—a hack that works, or an elegant solution that doesn't? I think someone's bad hand sockpuppet should convert this to use tables. Hesperian 11:56, 27 October 2008 (UTC)Reply

Why don't we use a div with align:auto; display:table;? Then we don't need to hack tables to get this result. Am I missing something? You can put the width in the style as well, then you can use percentages as well:
<div  style="width:{{{width|auto}}}; margin:auto; display:table; background:inherit; text-align:{{{align|left}}};">
{{{body|{{{1}}}}}}
</div>

It seemed to work when I tried it, but I'm not sure if I missed something. Mock up of the template at User:Inductiveload/Sandbox6 and example of use at User:Inductiveload/Sandbox7. Inductiveloadtalk/contribs 15:18, 22 February 2011 (UTC)Reply

It works for you because you're using a decent browser. Try it in IE7. Hesperian 23:38, 22 February 2011 (UTC)Reply
Good point, I knew there was probably a reason we did it this way, I just wanted to check. So, next step: eradicate IE. I'm not sure if that should go above or below world hunger. Inductiveloadtalk/contribs 04:30, 23 February 2011 (UTC)Reply
Would it be possible to take a look at this again, now that it's 4 years later? In 2011, IE7 was on fewer than 1% of computers, so I'm guessing that number is probably miniscule now, especially with almost no major website supporting it anymore. There are surely more mobile users than IE7 users now and the current template won't work for the mobile website. The Haz talk 00:24, 6 April 2015 (UTC)Reply
Before you go crazy with this check out {{center block}} and associated. You might find this has all been pretty much done before... 58.166.69.222 00:37, 6 April 2015 (UTC)Reply
XD. Nothing to go crazy about here. The CSS is much easier. However, I'm also of the opinion that they should end up as one (merged) template. The Haz talk 00:48, 6 April 2015 (UTC)Reply
@Hesperian, @George Orwell III: ^^ — billinghurst sDrewth 14:21, 6 April 2015 (UTC)Reply

┌───────────────────────┘

Well I'm all for revisiting/refining/merging one or both of these templates — but the heavy duty user's of this/these templates need to be able to differentiate when to apply one instead of the other and why. One has to target the content itself and the other should target the containing block of content in short.

First Q: Can anyone get the css described here to reproduce the same results under the wiki mark-up? I was once able to replicate the results earlier this year (January 2015?) but I can't get it "work" now. tia. -- George Orwell III (talk) 02:14, 7 April 2015 (UTC)Reply

CSS3 will still support what's written above as far as I know, and that replicates the current template, except that it will work in more places. As for actually getting your idea to work, someone would have to explain to me how we can work with pseudo-classes on Wikisource. However, I think I'm missing your point about using this (for this specific template) rather than just centering a div in its parent element.
As for why I think we shouldn't have two templates, it's simply because I don't think we should be asking people to choose between a table layout (sematically incorrect and somewhat nonfunctional) and CSS. Plus, what do we do about all the books that currently use this template and shouldn't? The Haz talk 14:16, 7 April 2015 (UTC)Reply
I just want a centered text block that will work (not have adverse/weird consequences interactions). I don't really care whether it is in a table or in a div. — billinghurst sDrewth 14:43, 7 April 2015 (UTC)Reply
Same, except that our current table layout is broken (because it's a table). Here's an example of what I mean by CSS to replicate the table layout without using an HTML table. This will work for mobile readers. The Haz talk 14:49, 7 April 2015 (UTC)Reply

And oft by yon blue gushing stream
Shall Sorrow lean her drooping head,
And feed deep thought with many a dream,
And lingering pause, and lightly tread,–
Fond wretch! as if her step disturb'd the dead!

I've changed the sandbox to what I had in mind and added a few more test cases for you to peruse. The Haz talk 15:21, 7 April 2015 (UTC)Reply
I've taken the liberty of reducing/rejiggering that a bit further & I'm happy to pull the trigger on that rev. and make that the new main if its OK'd but I'm curious as to why we went from text-align:center in the "old" to text-align:left in the new. Won't that screw up any existing instance where center was expected? -- George Orwell III (talk) 01:37, 8 April 2015 (UTC)Reply
That text-align:center was actually on the table to center align the row/cell. The cell itself was left-aligned. The Haz talk 03:49, 8 April 2015 (UTC)Reply
I should also add that I'm good with the final too. The Haz talk 03:51, 8 April 2015 (UTC)Reply
You're right of course & I made the change. Fingers-crossed. -- George Orwell III (talk) 04:49, 8 April 2015 (UTC)Reply

alternative 1 edit

Jurisdiction is based on diversity of citizenship, 28 U.S.C. § 1332(a)(1). Plaintiff, Florence Simpson, is an individual residing in New Jersey. Defendant, Lifespring, Inc. ("Lifespring") is a California corporation with its principal place of business in California. Defendant John P. Hanley ("Hanley") is a citizen and resident of the State of California. He is President and principal shareholder of Lifespring. Plaintiff alleges that she participated in a group training program conducted by Lifespring in Philadelphia, Pennsylvania during April 1981. She contends that she was subjected to psychological manipulation resulting in psychological and emotional injuries.Jurisdiction is based on diversity of citizenship, 28 U.S.C. § 1332(a)(1). Plaintiff, Florence Simpson, is an individual residing in New Jersey. Defendant, Lifespring, Inc. ("Lifespring") is a California corporation with its principal place of business in California. Defendant John P. Hanley ("Hanley") is a citizen and resident of the State of California. He is President and principal shareholder of Lifespring. Plaintiff alleges that she participated in a group training program conducted by Lifespring in Philadelphia, Pennsylvania during April 1981. She contends that she was subjected to psychological manipulation resulting in psychological and emotional injuries.Jurisdiction is based on diversity of citizenship, 28 U.S.C. § 1332(a)(1). Plaintiff, Florence Simpson, is an individual residing in New Jersey. Defendant, Lifespring, Inc. ("Lifespring") is a California corporation with its principal place of business in California. Defendant John P. Hanley ("Hanley") is a citizen and resident of the State of California. He is President and principal shareholder of Lifespring. Plaintiff alleges that she participated in a group training program conducted by Lifespring in Philadelphia, Pennsylvania during April 1981. She contends that she was subjected to psychological manipulation resulting in psychological and emotional injuries.

alternative 2 edit

Jurisdiction is based on diversity of citizenship, 28 U.S.C. § 1332(a)(1). Plaintiff, Florence Simpson, is an individual residing in New Jersey. Defendant, Lifespring, Inc. ("Lifespring") is a California corporation with its principal place of business in California. Defendant John P. Hanley ("Hanley") is a citizen and resident of the State of California. He is President and principal shareholder of Lifespring. Plaintiff alleges that she participated in a group training program conducted by Lifespring in Philadelphia, Pennsylvania during April 1981. She contends that she was subjected to psychological manipulation resulting in psychological and emotional injuries. She contends that Lifespring, ...

Optional width component? edit

This works nicely in poetry/inserted, especially where it interrupts the flow of a work. However, I have come across situations where it is not quite wide enough and causes some wrapping. I was thinking that an optional width option to force the table column wider would be useful. Initially leaving a note here in case of any concerns/issues. — billinghurst sDrewth 10:39, 17 May 2010 (UTC)Reply

I've noticed that too. The only problem is that fixing the width breaks the centering; i.e. if you fix the width at 40%, then the "centred" text will start at 30% (i.e. (100-40)/2 ) regardless of its actual width. Hesperian 11:16, 17 May 2010 (UTC)Reply
Yep, and I know it will be a little bit of trial and error, ie. try au natural then add a value and incrementally +/- until the minimum disperse effect achieved. Only other option that I saw was a margin-left, and that gets hosed once you get variations in screen width.Plus you can give it a fixed width with px measure, rather than a %width. — billinghurst sDrewth 12:33, 17 May 2010 (UTC)Reply
Stuck it in and it can be reverted if required. width and add in px or em. — billinghurst sDrewth 13:22, 17 May 2010 (UTC)Reply
I've added a paremeter: "fix-narrowness" to it which causes it to use "min-width" instead of "width". I've added examples of use below. JustinCB (talk) 12:20, 8 August 2018 (UTC)Reply

Code: edit

Normal: edit
{{block center|width=3em|<poem>The King hath happily receiu'd, Macbeth,
The newes of thy successe: and when he reades
Thy personall Venture in the Rebels sight,
His Wonders and his Prayses doe contend,
Which should be thine, or his: silenc'd with that,
In viewing o're the rest o'th' selfe-same day,
He findes thee in the stout Norweyan Rankes,
Nothing afeard of what thy selfe didst make
Strange Images of death, as thick as Tale
Can post with post, and euery one did beare
Thy prayses in his Kingdomes great defence,
And powr'd them downe before him.</poem>}}
With fix-narrowness: edit
{{block center|fix-narrowness=1|width=3em|<poem>The King hath happily receiu'd, Macbeth,
The newes of thy successe: and when he reades
Thy personall Venture in the Rebels sight,
His Wonders and his Prayses doe contend,
Which should be thine, or his: silenc'd with that,
In viewing o're the rest o'th' selfe-same day,
He findes thee in the stout Norweyan Rankes,
Nothing afeard of what thy selfe didst make
Strange Images of death, as thick as Tale
Can post with post, and euery one did beare
Thy prayses in his Kingdomes great defence,
And powr'd them downe before him.</poem>
}}

Presentation: edit

Normal: edit

The King hath happily receiu'd, Macbeth,
The newes of thy successe: and when he reades
Thy personall Venture in the Rebels sight,
His Wonders and his Prayses doe contend,
Which should be thine, or his: silenc'd with that,
In viewing o're the rest o'th' selfe-same day,
He findes thee in the stout Norweyan Rankes,
Nothing afeard of what thy selfe didst make
Strange Images of death, as thick as Tale
Can post with post, and euery one did beare
Thy prayses in his Kingdomes great defence,
And powr'd them downe before him.

With fix-narrowness: edit

The King hath happily receiu'd, Macbeth,
The newes of thy successe: and when he reades
Thy personall Venture in the Rebels sight,
His Wonders and his Prayses doe contend,
Which should be thine, or his: silenc'd with that,
In viewing o're the rest o'th' selfe-same day,
He findes thee in the stout Norweyan Rankes,
Nothing afeard of what thy selfe didst make
Strange Images of death, as thick as Tale
Can post with post, and euery one did beare
Thy prayses in his Kingdomes great defence,
And powr'd them downe before him.