图片居中

图片水平垂直居中

如果图片左浮动并且"display:inline"时，我们只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

在现代浏览器中，对于垂直居中我们可以给图片容器设置“dipslay:table-cell;vertical-align:middle”。

但是这种方法在IE6-7中无法正常运行。

建议以下几种方法：

1、table-cell加上display:inline

首先在图片的容器元素中设置“display:table-cell;vertical-align:middle;”实现现浏览器的垂直居中；
IE6-7有一个好的办法，就是创建一个线盒，此线盒的高度和图片容器的高度一样，并且给这个线盒也设置“vertical-align:middle”。
接下来我们可以在图片的容器中创建一个空元素（比如说span），并且设置span的“display:inline-block;height:100%;vertical-align:middle”。

创建线盒中有一个细节需要注意，在IE6-7中空的line-block元素宽度为“0”，这样在IE6-7下是没有效果的，此时我们需要给span加上“width:1px”，此时会给水平居中造成1px的误差，但这种bug是可以接受得了的。

那么最终解决方案就是使用display:table-cell和设置了display:inline-block的线合span。

2、空白标签实现图片的垂直居中

将span行内元素设置为行内块元素，也就是将其display设置为“inline-block”，将其宽度定位1px，height为容器的100%，这样高度可以和容器的高度达到一样，然后通过“vertical-align:middle”设置垂直对齐，从而实现所需要的效果。

3、display:table模拟表格实现图片垂直居中

接下来要说的这种方法是结构有点复杂，而且在IE6-7事要配合hack来产现。这个方法就是模拟表格的形式来实现图片垂直居中的效果。

表格大家都知道，他有行（table-row）单元格（table-cell），众所周知，表格单元格中“vertical-align: middle”能让元素垂直居中。

4、jQuery方法实现图片居中

就是得用jQuery方法，将图片转换为其父元素的背景图片，并且在其父元素中居中显示背景图片，然后在将其自身的透明度设置为“0”， 这样也能达到图片居中的效果。

图片垂直居中建议：

• 单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
• 文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性。
• 例如：.pic img{ vertical-align:middle; }