html - 分区中心的图像

Question

我有分区(相同的宽度和高度)和图像(不同的宽度和高度)。我尝试将注意力集中在部门内部的图像上。所以使用

{ text-align: center}

此处图像居中，但顶部值未更改。

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

这里是jsfiddle我尝试过什么。我正在等待你的建议。 谢谢。

Answer 1

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

但在这种情况下，您不能给予 margin 因为 table-cell 强制 div 充当 td从技术上讲，您不能为表 td 提供余量。

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

CSS

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

<强> DEMO

------------------------------或------------- ---------------------------

您可以向每个 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;
}
​

<强> DEMO 2