分区中心的图像答案

【问题标题】：Images on center in the division分区中心的图像
【发布时间】：2012-12-02 06:15:33
【问题描述】：

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

{ text-align: center}

此处图像居中，但顶部值没有改变。

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

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

【问题讨论】：

标签： html css image center

【解决方案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

【讨论】：