html - 分区中心的图像

Question

我有分割（same width and height）和图像（different width and height）。我试图以该部门内的图像为中心。所以用

{ text-align: center}

这里图像居中，但最高值没有改变。

这是我真正需要的例如图像。

这是我尝试过的jsfiddle 。我在等你的建议。谢谢你。

Answer 1

您可以使用display:table-cell将内部图像对齐到 div 的中间。

但在这种情况下，你不能给margin，因为table-cell强制div充当 atd并且从技术上讲，你不能给 table 留有余地td。

所以我用白色为 div 添加了边框。

CSS

.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
    border:white 5px solid
}
​

演示

- - - - - - - - - - - - - - - 或者 - - - - - - - - - - ---------------------

您可以为每个 div 添加一个外部 div，并为外部 div 指定边距。

CSS

.outer{margin: 0 0 10px 10px; display:inline-block}
.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;    
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}
​

演示 2