Question

我有以下内容：

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。我以前演示的图像是150像素×80像素。

我需要在.photo div中显示图像并裁掉任何多余的图像。图像需要垂直和水平居中。但是，display:table-cell会导致.photo div忽略我的宽度和高度设置。我怎么能绕过这个？

Answer 1

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%;
}

Answer 2

您可以使用display: table-cell，但父级需要display: table-row，并且该行的父级应该有display: table;

Answer 3

如果你放一个内部div它似乎工作。不确定为什么你首先需要display:table-cell？

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

另外，您是否考虑过在图像上加宽？这将导致图像的高度也相应调整大小。

你可以使用display：table-cell并且有一个固定的宽度/高度？

3 个答案: