38

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

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

スパンタグがこのtext-align;機能をサポートしていないのはなぜですか？

4

6 に答える 6

117

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

両者の働き方の違いtext-align:centerは幅にまで及びます。

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

要素のinline幅は、そのコンテンツ テキストのサイズから取得されます。

text-align:centerテキストが要素の中央に配置されるように指示します。しかしinline要素では、要素がテキストと同じ幅であるため、これは明らかに効果がありません。どちらか一方に揃えても意味がありません。

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

最後に、あなたのための解決策：

displayとの間に中途半端な家を提供するプロパティには追加の価値がありblockますinline。便利なことに、それは と呼ばれてinline-blockいます。CSS でを指定する<span>とdisplay:inline-block;、引き続きインライン要素として機能しますが、width. 幅を指定すると、その幅内でテキストを中央揃えにすることができます。text-align:center;

それが役立つことを願っています。

于 2011-10-13T16:06:04.470 に答える
10

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

ここを参照してください: http://www.w3.org/TR/CSS2/visuren.html

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

style="display: block; margin: 0px auto; text-align: center;"
于 2011-10-13T16:03:50.580 に答える
4

スパンはインライン、div はブロック要素です。つまり、スパンはそれぞれのコンテンツと同じ幅しかありません。周囲のコンテナー (ブロック コンテナーの場合) 内のスパンを揃えることはできますが、コンテンツを揃えることはできません。

Span は、主に書式設定の目的で使用されます。コンテンツを配置または配置する場合は、div、p、またはその他のブロック要素を使用します。

于 2011-10-13T15:58:41.990 に答える
4

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

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

したがって、div の幅が 100px でコンテンツが 50px しかない場合、ブラウザーは残りの 50px を 2 で分割し、コンテンツの両側に 25px をパディングして中央に配置します。

于 2011-10-13T16:03:22.030 に答える
2

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

「b」タグの振る舞いを持っていると考えてください。

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

div はブロック要素です。

于 2011-10-13T15:58:43.483 に答える
2

スパン要素セットがそのコンテンツと同じ幅であるため、そうである可能性があります。幅が 500px でテキストが中央に配置された div があり、span タグを入力すると、中央に配置する必要があります。したがって、問題は CSS の問題である可能性があります。Firebug を Firefox にインストールし、span または div オブジェクトのスタイル属性を確認します。

于 2011-10-13T16:03:04.137 に答える