Question

Is it possible to center a multiline <div> horizontally, while its contents remain aligned to the left (text-align:left), without specifying display:table and without having to know the pixel width of the <div> (it should become as wide as needed)? It has to work in Firefox 3 and Chrome.

I have the following working solution which contain a <div> inside another <div>, so I’m only looking for a solution which doesn’t need an inner <div>.

<style type="text/css">
div.showtitle {
  margin-left:auto;  
  margin-right:auto;
  display:table;
}
div.showtitle > div {
  background:#7777ff;
  color:ffffff;
  text-align:left;
  padding:.34em;
  font-size:140%;
}
</style>
<div class="showtitle"><div>Centered div<br>with left-aligned text</div></div>

FYI The reason why display:table and font-size:140% cannot be combined in the same <div> is that in Chrome it has a bad effect on the line height of the font-size of its container gets changed in JavaScript.

Answer 1

It seems that it’s impossible to do the center alignment without display:table or an inner <div> or specifying the width of the <div>.