1

HTML/CSS での垂直方向の配置/中央揃えに関する約 20 の質問と記事を読みましたが、特定のケースを期待どおりに機能させることができません。

http://jsfiddle.net/pf29r/3/をご覧ください。

<div class="outer">
  <div>Left1</div>
  <div>Left2</div>
</div>
<div class="inner">
  <a href="#">Before</a>
  <span>Middle</span>
  <a href="#">After</a>
</div>
<div class="outer">
  <div>Right1</div>
  <div>Right2</div>
</div>

.outer {
  display: inline-block;
}

.inner {
  display: inline-block;
}

内側のブロックのコンテンツを垂直方向に中央揃えにしたい。私が達成できた最良の方法は、display: table と display: table-cell を使用することでした。これはほとんど機能しますが、コンテンツは完全には中間ではありません。

私は何が欠けていますか？

4

1 に答える 1

3

に追加vertical-align: middleし.outerます。に追加する必要があると予想されるため、これは直感に反しますが.inner、機能します。

http://jsfiddle.net/pf29r/5/

于 2013-03-30T15:15:06.010 に答える