web-dev-qa-db-ja.com

display：table-cellを使用して、幅/高さを固定できますか？

私は以下を持っています：

CSS：

.photo {
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 100px;
}

[〜＃〜] haml [〜＃〜]

.photo
  %img{:src => my_url}

JsFiddle here を参照してください。私がデモンストレーションに使用した画像は、150px x 80pxです。

.photo div内に画像を表示し、余分な部分を切り取る必要があります。画像は垂直方向と水平方向の中央に配置する必要があります。ただし、display:table-cellを使用すると、.photo divで幅と高さの設定が無視されます。どうすればこれを回避できますか？

htmlcsscss-tables
20
CodeWombat

table-cellは、垂直方向の配置に対する唯一の解決策ではありません。

.photo {
    overflow: hidden;
    background: #c0c0c0;
    display:inline-block; /* or float:left; */
    text-align: center;
    width: 100px;
    height: 100px;
    line-height:97px;
}
.photo img {
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
}
20
MatTheCat

display: table-cellを使用できますが、親にはdisplay: table-rowが必要で、行の親にはdisplay: table;が必要です

5
general666

あなたがインナーdivを入れればそれはうまくいくようです。なぜ必要かわからないdisplay:table-cellそもそも？

http://jsfiddle.net/locrizak/5tawU/

また、単に画像に幅を付けることを検討しましたか？これにより、画像の高さもそれに応じてサイズ変更されます。

1
locrizak