Excellent insight Jukka! Centered variable width column with CSS2.1 and no offset positioning assumptions – that's a new one in my book!
For the sake of pedantry I might add that line-breaks are significant semantic elements in a haiku, and that the haiku I used is considered invalid according to most description. BTW to avoid laborious load > copy > pasting into validation services, you can get a direct HTTP reference to jsbin markup via http://jsbin.com/{bin#}/{revision#} Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 17 December 2014 at 14:21, Jukka K. Korpela <jkorp...@cs.tut.fi> wrote: > > 2014-12-17, 15:53, Barney Carroll wrote: > > You can use display inline-block, left 50% (relative to offset parent) >> and transform translateX( -50% ) (relative to self) to achieve this >> effect with variable width: http://jsbin.com/ruwada/1/edit?css,output >> > > Nice. > > Here’s a different idea, with even better browser coverage: make the poem > an inline block, and place it in a block container (with no other content), > and set text-align: center. An inline block acts internally as a block, but > externally as a “black box” which is set like a single large character. We > need to set text alignment to left inside the inline block, otherwise it > inherits the property and lines get centered. Example: > > <style> > .context { > text-align: center; > } > .poem { > display: inline-block; > white-space: pre; > text-align: left; > } > </style> > <div class=context> > <span class=poem> > Mieleni minun tekevi, > aivoni ajattelevi, > lähteäni laulamahan, > saa’ani sanelemahan. > </span> > </div> > > I have used white-space: pre so that the poem can be written in > a natural way with no inner markup, but you can of course instead > end each line with <br>.. > > Using <span> instead of <div> for the poem may look illogical, > as its really a block of text. The practical reason is that IE 5.5 > to IE 7 have limited support to display: inline block, namely > only for elements that have display: inline as the default. > So thanks to this, the approach should work on all browsers > that you can find in the wild these days. > > Yucca > > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
