html图片水平距离,css图片文字水平垂距中

一、本文概述

想必大家在做效果的时候经常会碰到文字会垂直距中的效果，单行、多行混合的情况，单行距中已无问题，height,line-height又或者padding:上下相同即可。

在网上搜索到不少资料，本人实践后的经验是

父级标签属性：display:table-cell;vertical-align:middle;

距中标签元素：vertical-align:middle;display: inline-block;

使用以上两个技巧即可以使得标签内的文字或图片垂直距中。当然这些使用的同时会有些属性会干扰到垂直距中，如：position中的absolute,fix(定位),和flaot中的left,right(浮动)如果还有其它属性请通知我!

如果一定要使用定位或浮动的效果，可以再距中元素的父级标签外面再包含一个新标签用来作效果源代码如下：

本实例经测试，兼容360,FF,chrome,IE8+。(底部附完整源码)

所以要想垂直距中还要不怕麻烦(多添加标签)才行啊。期待有更好的方法！

啰嗦了那么多下面就来看例子吧，

下面实例用到的几个样式:

/**主要垂直距中css vbox 垂直距中的容器，vtxt为垂直距中的内容**/

.vbox{display:table-cell;vertical-align:middle;}

/**添加此样式的标签已经变成内敛元素了，而不是块状元素**/

.vtxt{vertical-align:middle;display: inline-block;}

.center{text-align:center;}

.block{display:block;margin-bottom:10px;}

.ex{width:400px;height:200px;border:1px solid #e6e6e6;border-radius:5px;}

img{margin:0 5px;}

二、单行文字的垂直距中实例

①效果图如下：

②源代码如下：

我是单行文看我距中了

三、多行文字的垂直距中实例

①效果图如下：

②源代码如下：

我是多行文看我距中了1
我是多行文看我距中了2
我是多行文看我距中了3
不信再加一行添加成功添加新一行4

四、多张图片的垂直距中实例

①效果图如下：

②源代码如下：

五、多张图片的垂直距中父级标签浮动的实例

①效果图如下：

②源代码如下：

• 

• 

• 

• 

六、完整的源代码如下：

图片文字水平垂距中

/**主要垂直距中css vbox 垂直距中的容器，vtxt为垂直距中的内容**/

.vbox{display:table-cell;vertical-align:middle;text-align:center;}

/**添加此样式的标签已经变成内敛元素了，而不是块状元素**/

.vtxt{vertical-align:middle;display: inline-block;}

.clearfix{zoom:1;}.clearfix:after,.clearfix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}

ul{margin:0;padding:0;}

.imglist li{list-style:none;width:144px;height:144px;float:left;border:1px solid #e6e6e6;margin-right:10px;}

.imglist li p{width:144px;height:144px;}

.imglist li p img{max-width:100%;max-height:100%;}

.block{display:block;margin-bottom:10px;}

.ex{width:400px;height:200px;border:1px solid #e6e6e6;border-radius:5px;}

img{margin:0 5px;}

单行文字垂直距中

我是单行文看我距中了

---

多行文字垂直距中

我是多行文看我距中了1
我是多行文看我距中了2
我是多行文看我距中了3
不信再加一行添加成功添加新一行4

---

多个图片垂直距中

---

多个图片浮动垂直距中

• 

• 

• 

• 

七、结语：

效果不同，垂直距中的样式还是一样，没有其它的CSS HACK，个人也特别讨厌。如果还有什么不明白可以留言，当然还是希望能够帮大家解决问题！

(完)