图片垂直居中的意外收获（都是空白惹的祸）-优快云博客

本文详细阐述了一个在不同浏览器下遇到的布局问题：图片垂直居中但水平位置出现偏差。通过排查发现是由于<i>标签后的空格导致的布局错误，并提供了解决方案。

最近在学习一个图片的垂直居中，最后，结果是，图片确实是垂直居中了，不过水平却不居中了。

先看看代码：

<div class="center">
<div>
<a>
<i></i>
<img src="img/center/1.jpg" alt=""/>
</a>
</div>
</div>

//css
div.center{height:220px; width:210px; margin:20px auto;}
div.center div{display:table; width:204px; height:184px;}
div.center a{overflow:hidden; text-align:center; display:table-cell; border:solid 2px #00f; vertical-align:middle; width:200px; height:180px;}
div.center a{display\0:block\9; *display:block;}
div.center a:hover{border:solid 2px #ff0;}
div.center i{vertical-align:middle; height:100%; display:inline-block;}
div.center img{vertical-align:middle;}

--------------------------
经过许久的排查，才发现在ff，chrome，和opera等浏览器下，水平居中有问题。原来是<i></i>标签后面的空格犯的错。

解决方案：删除后边的空白，不让i 和 img标签换行。

转载于:https://www.cnblogs.com/chyong168/archive/2011/11/20/2256050.html