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/
