2

私はみんなのお気に入りのCSSトピックである垂直方向の配置をいじっています。私には意味のない小さなケースを見つけました。これはおそらく、CSSについて何かを理解していないことを意味します。

私は次のHTMLを持っています（これは探索コード用なので、インラインスタイルを許してください）：

<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; display:inline-block;"> </span>
    <span>Some text</span>
</div>

これにより、青いボックスと一部のテキストが垂直方向の中央に表示されます。しかし、を通常のスペース文字に置き換える&nbsp;と、他のスパンのテキストは中央に配置されなくなります。これを示すJSFiddleを作成しました。

私の質問は&nbsp;、最初のスパンでaからスペース文字に変更すると、2番目のスパンの垂直方向の配置が変更されるのはなぜですか？

4

3 に答える 3

4

vertical-alignプロパティがどのように機能するか混乱しています。ブロックレベルの要素には適用されません。非テーブルセルおよび非インライン要素に設定されている場合、プロパティは、要素自体ではなく、その要素内のすべてのインラインテキストに実際に適用されます。

通常のスペースを使用する場合、スペースは実際にはコンテンツではないため、ブラウザによって実際に「レンダリング」されることはありません。したがって、ボックス全体がテキストの行になり（インラインブロックとして表示しているため）、ベースラインは親の一番下に設定され、下部の黒い境界線に対して設定されます。これが、テキストがずっと下に表示される理由です。そこの。

改行しないスペースを使用する場合、スペースはコンテンツであり、レンダリングされます。これにより、テキストのベースラインが、青いボックス内に実際に表示される場所まで移動します。実際にはテキストの中央に配置されていません。それは私の画面の中心にはほど遠いです。ベースラインはコンテンツに基づいて移動しました。この例から、継続するテキストの行の高さも変更されることがわかります。

これを修正する簡単な方法は、青いボックスを左にフロートさせてから、残りのテキストの行の高さを手動で設定することです。jsFiddleを参照してください。

<div style="height: 40px; line-height: 40px; vertical-align: middle; border: 1px solid blue; margin: 1em 2em;">
    <span style="background-color: Blue; height: 30px; width: 30px; margin: 5px 1em; float: left;"></span>
    <span>Some text that continues on and on and on sothat you can see what is actually happening here blah blah blah blah blah</span>
</div>​
于 2012-04-19T17:47:27.330 に答える
0

エンティティ&nbsp;はノーブレークスペースを表し、スペース文字の変形です。それらは同じではありません。

実際、エンティティは自動改行を防ぎます

ウィキペディアで詳細を読む

さらに、空白は「空の」スパンになり、その「悪い動作」を引き起こします

于 2012-04-19T17:46:21.733 に答える
0

役立つかもしれませんか？：

http://jsfiddle.net/mFryV/18/

于 2012-04-19T17:51:17.813 に答える