lineheight使图片多行文字垂直居中

多行文字垂直居中

html部分：

<p class="mulit_line" style="width: 500px">
<span style="font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis quaerat. Iste nisi nemo omnis, repellendus facilis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo voluptatum beatae officiis doloribus culpa et autem velit voluptatem quidem non, tempora, pariatur veritatis quaerat. Iste nisi nemo omnis, repellendus facilis.
</span><i>&nbsp;</i>
</p>

css部分：

.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

图片垂直居中：

html部分：

<ul class="zxx_ul_image"><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></li><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></li><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" /></li><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" /></li><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" /></li><li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" /></li>
</ul>

css部分

.zxx_ul_image{overflow:hidden; zoom:1;}
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}

转载而来。。。

lineheight使图片多行文字垂直居中相关推荐

css 单行/多行文字垂直居中问题
例子可以直接看这里 http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释 http://b ...
单行/多行文字垂直居中
转自:https://www.cnblogs.com/moqiutao/p/4807792.html 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要 ...
div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
css布局-多行文字垂直居中
场景:父元素高度固定,如何使其中的文字垂直居中? 方法一: 代码: <style>*{padding: 0;margin:0;font-size: 12px;}div{float: le ...
单行文字垂直居中，多行文字垂直居中
这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法: 一.单行文字居中原理: 使用height 和 line-height,相等的原理. 二.多行文字居中原理: 将多行文字当做一张图片去 ...
多行文字垂直居中的方法
<body><div><span>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多 ...
多行文字垂直居中实现--四种方法
1. 将父元素设置为块级表格来显示display:table;子元素设置为表格单元格来显示,设置vertical-align: middle. <div style="margin: ...
CSS多行文字垂直居中的两种方法
<div class="middle-box"><div class="middle-inner"><p><span ...
html5图片和两行文字垂直居中显示,何如让文字跟图片垂直居中对齐
1.来点花的吧:after占位 1111111 .box{ height: 400px; } .box:after{ content:''; width:0; height:100%; display ...

lineheight使图片多行文字垂直居中

lineheight使图片多行文字垂直居中相关推荐

最新文章

热门文章