Geek Answers Handbook

How to center a div horizontally without display: table?

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

I have the following working solution that contains a <div> inside another <div> , so I am only looking for a solution that does not require an internal <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 display:table and font-size:140% cannot be combined in the same <div> is because in Chrome it has a bad effect on the height of the font-size string of its container, which changes in JavaScript .

+4
source share
6 answers

It seems that it is not possible to center alignment without display:table or internal <div> or specifying the width of the <div> .

0
source 
 <div style="margin:0 auto; width:300px"> Text<br /> text </div>
+2
source

All you really need is to set the width in the div and set the automatic margins. You do not need an external div ; the element will be located horizontally in any element of the level of the block in which it is contained, including the body.

 .showtitle { with: 350px; margin-left: auto; margin-right: auto; text-align: left; }

Update

It's unclear what you mean by the desire that the width of the div be dynamic and yet be multi-line. At what point will the contents wrap, or do you want to do only manual line breaks? If you do content wrapping, will the stick div be 100% time when it is complete? If you do not want the width to be 100%, why should the maximum width be set?

You mentioned that you want the content to be left-aligned, but if it was contained in a centered block that automatically matches the size, then you basically request a centered inline element. If you want the content to be wrapped across multiple lines and left justified, you will need to specify the width or be in order with 100% width. If you want the lines of text to be automatically balanced, and then to resize the container, I think you're out of luck as far as CSS suggests.

+2
source 
 <div class="showtitle">Centered div<br>with left-aligned text</div>

with

 .showtitle { margin: 0 auto; width: ...; }

should work fine in Firefox and Chrome.

+1
source

I may have read it wrong, but you should just apply margin: 0 auto; width:960px; margin: 0 auto; width:960px; to your showtitle div and be golden.

+1
source 
 <style> #outer { text-align: center; } #inner { display: -moz-inline-box; /* Firefox < 3 */ display: inline-block; /* Standards */ /* IE < 8, inline + hasLayout */ *display: inline; *zoom: 1; text-align: left; } </style> <div id="outer"><div id="inner">Your centered content here</div></div>
+1
source

More articles:


All Articles