38

ライブページはこちら.

次の HTML ページがあるとします。

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}
<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

両方の記事が整列されることを期待していますが、下のスクリーンショットでわかるように、両方の記事にテキストがある場合にのみ、<article>要素が中央に配置されます。

アライメントの問題

この動作の原因とそれを修正する方法はありますか?

4

4 に答える 4

60

追加:

vertical-align: bottom;

あなたの2番目のルールには、それが機能するはずです。どうやら、テキストのないインラインブロックはインライン画像などとしてレンダリングされ、これらの要素の垂直方向の配置が正しくないため、強制的に下に配置することで問題が修正されます。

出典:テキストのない inline-block 要素のレンダリングが異なる

于 2012-11-25T04:15:12.823 に答える
47

これは、CSS の「ベースライン」垂直配置の結果です。CSS 2.1 仕様、セクション 10.8 行の高さの計算: 'line-height' および 'vertical-align' プロパティから

ベースライン

ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、マージンの下端を親のベースラインに合わせます。（私の強調）

インライン ブロックのデフォルトの配置は「ベースライン」であるため、上書きされない限り、このルールが適用されます。テキストがインライン ブロックに配置されると、そのテキストによってインライン ブロックのベースラインが作成され、最初の (太字ではない) 文が適用されます。

インライン ブロックにテキストがない場合、ベースラインがないため、2 番目の (太字の) 文が適用されます。

ここのJSFiddleで：http://jsfiddle.net/WjCb9/1/私はあなたの例からmargin:1em（少なくとも私にとっては）誤解を招く錯覚を作成していたものを削除しbaseline、含まれているボックスのベースラインがどこにあるかを示すテキストを追加しましたは。ベースラインは「ベースライン」という単語の下部に沿っているため、空のインライン ブロックの下マージン エッジは、上記の CSS ルールで要求されているように、親のベースラインに揃えられていることがわかります。

于 2012-11-25T11:46:23.637 に答える
6

これのクローン

記事に垂直方向の配置を追加:

section[role=main] article { 
  ...
  vertical-align: middle;
}

http://jsbin.com/oqodol/6/edit

于 2012-11-25T04:18:53.633 に答える
2

inline-block要素はtext-align、親のによって配置されます。

ブロック内にテキストがない場合、整列するものはありません。

とフロートを使用してこの問題を解決できますdisplay: block;。または、私の提案は、疑似要素を使用して改行しない幅ゼロのスペースを挿入することです。

section[role=main] article:before {
  content: "\2060";
}

デモ

于 2012-11-25T04:17:29.737 に答える