Nested DIV is not centered

[lwchdev]

#footer {position: relative; float:left; clear:both; left:265px; width:550px; border-top: 1px #CCCCCC solid;text-align:center}
#footer div.line {clear:both;margin:0px auto}
<div id="footer">
 <div class="line">
   <ul><li>item 1</li><li>item 2</li>..</ul>
 </div>
 <div class="line">
   <ul><li>item 1</li><li>item 2</li>..</ul>
 </div>
 <p>Some other content</p>
</div>

I wish the two lines are centered, but they both left justified. Why?

[lwchdev]

I tried

set a specific width:
DIV.line {width: 90%; margin-left: auto; margin-right: auto;}

change the value of the display property:
DIV.line {display: table; margin-left: auto; margin-right: auto;}

neighther worked.

[lwchdev]

Sorry, the percentage solution works, but not truely centered.

[createErrorMsg]

#footer div.line {clear:both;margin:0px auto}
...
I wish the two lines are centered, but they both left justified. Why?

Auto-margin centering only works if the block level element to which it is applied has an explicit width. The reason for this lies in the equation used to calculate box widths, and how that equation behaves when given auto values. From the W3 specs [w3.org] on the issue...

If 'width' is set to 'auto', any other 'auto' values become '0'

If you don't explicitly set one, width defaults to auto, which switches the auto values for left and right margin to 0, which doesn't center the element.

Add a width, and the auto margins will center. However, an easier metho might be to set the list with width:100% and text-align:center. This should result in the text of the list items being centered in the available space.

cEM

[lwchdev]

thanks for your quick reply. For my case: width:100% means the whole line is left justified; Maybe I should use table instead.

[createErrorMsg]

For my case: width:100% means the whole line is left justified

Since auto margins take the remaining space available after explicit widths, padding and borders have been removed and splits it between the two sides, applying auto margins to 100% width also results in 0 value margins. Once 100% of the space is taken up by width, there's nothing left to split up for margins.

If you're using 100% width on the element with auto margins, you might as well remove them altogether. The problem, then, is not centering, but the text-alignment being applied to the elements within that div.

cEM