Min and max-width mess up text-align center

Issue

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?

Solution

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>

Answered By - Samuel Cook