Минимальная и максимальная ширина испортите выравнивания текста центр

Question

скрипку: http://jsfiddle.net/uK7w6/1/

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

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

Если вы избавитесь от максимальной и минимальной ширины, предложение центров в порядке, но я хочу, чтобы это центр, а также так как не занимают всю ширину. Почему текст выравнивается влево, когда я добавляю ограничения ширины?

Answer 1

Текст в пределах h1 фактически центрирован, но он центрирован в пределах 100px width box. Если вы хотите, чтобы h1 плавал в середине window, добавьте margin:0 auto;. Основная причина, по которой h1 выровнена влево, связана с свойством display:box.

<h1>this is a really, really long sentence</h1> 
<style type="text/css"> 
h1 { 
    min-width:100px; 
    max-width:100px; 
    text-align:center; 
    margin:0 auto; 
} 
</style> 

Answer 2

Это потому, что слово «предложение» имеет ширину более 100 пикселей и по умолчанию текст только разбивается на пробелы. Измените его на следующее [хотя это может затруднить чтение]:

h1 { 
    min-width:100px; 
    max-width:100px; 
    text-align:center; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    // Non standard for webkit 
    word-break: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
} 

Или сделать его шире. Вы можете центрировать его с помощью поля: 0 auto; - но слово предложение по-прежнему не будет сосредоточено в пределах h1.

Редактировать: Возможно, это то, чего вы на самом деле пытаетесь достичь.

Если вы хотите, чтобы каждое слово на новой строке и держать длинные слова центрированных вы можете сделать следующее:

h1 { 
    min-width:200px; 
    max-width:200px; 
    text-align:center; 
    white-space: pre-line; 
} 

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

бело-пространстве: до линии; поместит разрыв строки, где бы ни был разрыв строки в html. Вам все равно придется сделать весь элемент таким же широким, как и самое широкое слово.

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