图像中心垂直和水平对齐

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偏移量应设置为所定位元素各自尺寸的一半.如果包含元素需要灵活但需要绝对值才能正常工作.

演示所有技巧:jsfiddle.net/Marcel/JQbea(全屏)

Answer 2

为什么不只是删除img标签然后将图像设置为a background并将其居中,如下所示:

(以内联方式进行,但通过外部css文件是最好的方法)

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