minとmax-幅台無しテキストアラインセンター

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です。 windowの中央にh1を浮動させたい場合は、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

「文章」の語数が100pxを超えており、デフォルトではテキストがスペースで区切られているためです。 [読むのが難しくなりますが、次のように変更してください]：

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/