分区中心的图像

Question

我有图像（same width and height）的分区（different width and height）。我试着在分区内的那个图像上居中。所以使用

{ 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

<强> ------------------------------ OR ------------- ---------------------------

您可以为每个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