Min and max-width mess up text-align center

Question

The fiddle: http://jsfiddle.net/uK7w6/1/

<h1>this is a really, really long sentence</h1>  h1 {     min-width:100px;     max-width:100px;     text-align:center; } 

If you get rid of the max and min width, the sentence centers fine, but I want it to center as well as not take up the whole width. Why does the text align left when I add width constraints?

Answer 1

The text within the h1 is actually centered, but it is centered within a 100px width box. If you want the h1 to float in the middle of the window then add a margin:0 auto;. The primary reason that the h1 is aligned to the left has to do with the display:box property.

h1 {   min-width:100px;   max-width:100px;   text-align:center;   margin:0 auto; }

<h1>this is a really, really long sentence</h1>