图像中心垂直和水平对齐

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;
}

完成所有这些操作后，我将无法执行操作。请看一下并帮助我。

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太费时间，但是如果实际上将文本居中，则可能会出现问题。

显示：表格单元

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

就像好的旧表一样工作并且高度灵活，但是仅在现代浏览器中受支持。

位置：绝对

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

top和left该元件的一半的各自的尺寸被定位偏移应设置。如果包含元素需要灵活，但是需要绝对值才能工作，则效果很好。