图像垂直水平居中对齐

Question

大家好，我想要将一张图片垂直和水平居中对齐。我的HTML标记如下：

<ul class="big-wrapper">
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">
</div>
</li>
<li>
<div class="filler" style="vertical-align: middle; display: inline-block;">
    <img src="7-612x612-2.png" original="/7-612x612-2.png" style="margin: 0pt auto; display: table-cell; text-align: center; vertical-align: middle;">

</li>
</ul>

Used Css
ul.big-wrapper li > div {
height:612px;
width:612px;
}

ul.big-wrappe li {
float:left;
margin:0 20px 20px 0;
position:relative;
text-align:center;
}

我做了所有的事情，但仍然无法做到。请看一下并帮助我。

- Soarabh

---

我建议您查看一个类似的问题。 - Salman A

Answer 1

有几种好的方法可以水平和垂直居中一个元素，这取决于具体情况和您的偏好。

以下是示例标记：

<div><img src="a.png" width="100" height="100"></div>

行高

div { width:300px; height:300px; line-height:300px; text-align:center; }
div img { vertical-align:middle; }

这是一个不需要过多涉及position的好的快速修复方法，但如果文本实际上是通过这种方式居中对齐，可能会出现问题。

display:table-cell

div { width:300px; height:300px; text-align:center; display:table-cell; vertical-align:middle; }

这个表格和传统的表格一样好用，而且非常灵活，但是只支持现代浏览器。

position:absolute

div { width:300px; height:300px; position:relative; }
div img { top:-50px; left:-50px; position:absolute; margin:50% 0 0 50%; }

top和left的偏移量应设置为被定位元素相应尺寸的一半。如果包含元素需要是灵活的，但是需要工作的是绝对值，那么这个方法效果很好。

---

所有技术的演示：jsfiddle.net/Marcel/JQbea（全屏显示）

- Marcel

Answer 2

为什么不直接删除 img 标签，然后将图像设置为 background 并居中显示，如下所示：

（通过外部 CSS 文件进行内联操作是最佳方式）

<div style="background: url('7-612x612-2.png') no-repeat center center transparent;">&nbsp;</div>

- moe

---

抱歉，由于这是我的要求，我不能做到这一点。 - Soarabh

如果您想让图像拥有边框颜色怎么办？ - Nick