0

ここでdisplay: table見られるように、親 div とdisplay: table-cell子 div で使用しようとしましたが、画像を垂直方向に揃えることができないようです。私は何を間違っていますか？

これが私のコードです：

HTML:

<div class="body_splash">
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
</div>​

CSS:

.body_splash {
    width: 378px;
    float: left;
    display:table;
    height: 400px;
    background-color: #eaeaea;
}
.body_splash img {
    display: table-cell;
    vertical-align: middle;
}​

前もって感謝します。

4

2 に答える 2

2

デモをお試しください

<div class="table">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
  </div>
</div>​

.table {
  display: table;
  float: left;
  width: 378px;
  height: 400px;
  background-color: #eaeaea;
}

.table > div {
    display: table-cell;
    vertical-align: middle;
}​
于 2012-07-31T02:23:00.930 に答える
1

ボックスが固定サイズの場合は、これを使用します: Demo 1。

ボックス内に画像を絶対に配置します。

これらも見てください：

デモ 2

デモ 3

于 2012-07-31T21:46:36.953 に答える