.center {
margin: 0 auto;
display: table;
}
.center .content {
display: table-cell;
}
These CSS styles are used to center align the container with the class .center, while also keeping its contents (in .content) left aligned:
<div class="center">
<div class="content">
<p>Imagine this text<br>
as a stanza of poetry<br>
that is aligned to the left.<br>
But centered on the page.</p>
<p>(The center of the page corresponds to<br>
the midpoint of the longest line.)</p>
</div>
</div>
This setup works well in Firefox and Chrome, however, it does not behave as expected in Internet Explorer. In IE, the text remains left aligned without centering.
Is there an alternative solution to overcome this issue?