2

テキストが存在する親divの垂直方向にdivを中央に配置しようとしています。これが私が持っているものです：

ここに画像の説明を入力

テキストは適切に中央に配置されているように見えますが、黄色のボックスはそうではなく、少しおかしいように見えます。これが私がやっている方法です：

.btn {
      background-color: #ccc;
      color: #000;
      width: 200px;
      border: solid 1px black;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
}
.square {
      background-color: #ff0;
      width: 20px;
      height: 20px;
      display: inline-block;
}
.inner {
      display: inline-block;
}

<div class="btn">
  <div class="square"></div>
  <div class="inner">Hello</div>
  <div class="square"></div>
</div>

"table-cell" + vertical-align の使用法は機能するはずですか? 私は html5 だけに関心があります。実際には最新バージョンのモバイル サファリをターゲットにしているだけなので、古いブラウザなどについて心配する必要はありません。

これは、これの js フィドルです。

http://jsfiddle.net/TrJqF/

ありがとう

4

2 に答える 2

1

vertical-align:topスクエアクラスにセット。余分なスペースは、行の下にある j、g、y などの子孫テキスト要素用に予約されたスペースに由来します。

jsFiddle の例

于 2013-01-19T20:29:15.457 に答える
0

実際には両方の高さに違いはありません。内部クラスに黄色の背景色を適用し、明示的な高さの違いと高さのない違いを確認します。

正方形の div にはコンテンツがなく、内側の div にはコンテンツがあります。そのコンテンツに基づいて、それ自体で整列する css ボックス。次のように、正方形の div に空白を追加します。

  <div class="btn">
   <div class="square">&nbsp;</div>
   <div class="inner">Hello</div>
   <div class="square">&nbsp;</div>
  </div>

必要に応じて、上下に 1 または 2 ピクセルの余白を追加して、期待を示すことができます。

于 2013-01-19T20:23:48.780 に答える