web-dev-qa-db-ja.com

text-align：center ;?を使用した<span>と<div>の違い

私はこれを理解していません：

HTML <span>タグのテキスト揃えを中央に配置しようとしましたが、何もしませんでした... <div>タグで、すべてが機能しました。 cssでmargin: 0px auto;を設定するのと同じ状況。

なぜspanタグはtext-align;関数をサポートしないのですか？

csshtmltext-alignment
37
Akos

<span>と<div>の違いではなく、inlineとblockの要素の違いです。 <span>はデフォルトでdisplay:inline;になりますが、<div>はデフォルトでdisplay:block;になります。ただし、これらはCSSでオーバーライドできます。

2つのtext-align:centerの動作の違いは幅にあります。

block要素は、デフォルトでコンテナの幅になります。 CSSを使用して幅を設定できますが、いずれにしても固定幅です。

inline要素は、コンテンツテキストのサイズから幅を取ります。

text-align:centerは、テキストを要素の中央に配置するように指示します。ただし、inline要素では、要素がテキストと同じ幅であるため、これは明らかに効果がありません。何らかの方法で調整することは無意味です。

block要素では、要素の幅がコンテンツに依存しないため、text-alignスタイルを使用してコンテンツを要素内に配置できます。

最後に、あなたのためのソリューション：

displayとblockの中間にあるinlineプロパティには追加の値があります。便利なことに、inline-blockと呼ばれます。 <span>をCSSでdisplay:inline-block;に指定すると、インライン要素として機能し続けますが、 width。幅を指定すると、text-align:center;を使用してその幅内でテキストを中央に配置できます

お役に立てば幸いです。

116
Spudley

他の人が言ったように、スパンはインライン要素です。

こちらをご覧ください： http://www.w3.org/TR/CSS2/visuren.html

さらに、スパンをdivのように動作させるには、

style="display: block; margin: 0px auto; text-align: center;"
10
ooPeanutButter

スパンはインライン、divはブロック要素です。つまり、スパンはそれぞれのコンテンツと同じ幅です。周囲のコンテナ（ブロックコンテナの場合）内でスパンを調整できますが、コンテンツを調整することはできません。

スパンは主にフォーマットの目的で使用されます。コンテンツを配置または配置する場合は、div、p、またはその他のブロック要素を使用します。

4
Dennis Traub

スパンタグはそのコンテンツと同じ幅であるため、スパンタグの「中心」はありません。コンテンツの両側に余分なスペースはありません。

ただし、divタグはその収容要素と同じ幅なので、そのdivのコンテンツは、コンテンツが占有しない余分なスペースを使用して中央に配置できます。

したがって、divの幅が100pxで、コンテンツが50pxのみの場合、ブラウザは残りの50pxを2で除算し、コンテンツの両側に25pxをパッドして中央に配置します。

4
slolife

スパンはインライン要素と見なされます。基本的に、それ自体はその中のコンテンツに制約されます。多かれ少なかれ透明です。

「b」タグの動作があると考えてください。

<span style = 'font-weight：bold;'>太字のテキスト</ span>のように実行できます

divはブロック要素です。

2
Dave G

おそらく、span要素セットはそのコンテンツと同じくらいの幅になっているためです。幅が500ピクセルでテキストが中央揃えのdivがあり、spanタグを入力する場合は、中央に揃える必要があります。したがって、あなたの問題はCSSの問題かもしれません。 FirefoxでFirebugをインストールし、spanまたはdivオブジェクトのスタイル属性を確認します。

2
longilong