多行文本水平垂直居中

原创 银狐 随笔 待整理 2209阅读 2014-08-26 17:53:56 举报

话不多说,直接上效果。代码片段 1

评论 ( 8 )
最新评论
想的太美 3F 2014-09-01 17:00:58 8F

破解版-->银狐多行文本水平垂直居中
http://www.w3cfuns.com/home.php?mod=space&uid=5449566&do=blog&quickforward=1&id=5400151
欢迎各位拍砖
@原理
在test2中,<.img> 就像一个真的图片一样,以文字为中心轴居中,那么也就是说vertical-align:middle 需要一个行元素作为中心轴才能发挥作用
在test3中,span变成了inline-block,它拥有了100%的高度(display:inline-block),(由于它变形了,失去了vertial-align:middle;所以要加上!!!这是我瞎猜的,求大牛指证), <.img>也要加上,这

想的太美 3F 2014-09-01 15:10:19 7F

牛,你要是说了原理,我就给你加个 ‘大’ 字。

柒灬健忘 3F 2014-08-31 14:18:43 6F

.box span {
display: inline-block;
height: 100%;
width: 0;
background: red;
vertical-align: middle;}这个span放在了div的最左边(宽为0),有行高(可假设这里有文字)。再看p的vertical-align:Middle,是与父级的文字(span)垂直居中,当然前提也是必须设置p的display:inline-block属性

qinxingjun 4F 2014-08-29 11:04:16 5F

height=100%,表示父级div的高度,width=0是为了不显示。 vertical-align:middle; 是行内元素居中对齐的样式。

today 2014-08-29 08:37:23 4F

菜鸟有点看不懂,这个span的CSS样式的height和width。

孟辛棠 2014-08-28 14:46:04 3F

能说下原理吗

redemon 2014-08-28 10:14:59 2F

马克扎克伯格

xianglei 2014-08-28 09:56:04 1F

效果不错。