文本图片水平垂直居中

固定高度的元素内垂直居中一行文本

父元素:text-align:center; /*水平居中*/
文本元素:line-height:300px; /*垂直居中:行高=容器高度*/

固定高度的盒子内水平垂直图片

第一种方法:

父元素display属性设置为单元格属性。
display:table-cell; /*借用表格的行为*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/

第二种方法:

父元素:

text-align:center;
line-height:200px;/*垂直居中:行高=容器高度*/,相当于设置文本,

img{vertical-align:middle;}不加这个只是相当于图片和文本的顶端对齐,文本垂直居中,图片底端和文本的底端对齐

第三种方法:把图片当作背景来设置(用来弄头像比较方便)

p{width:300px; height:200px; border:1px solid; background:url(yahoo.png) no-repeat center;}
<p></p>

固定高度的盒子内水平垂直多行文本

父元素display属性设置为单元格属性。
display:table-cell; /*借用表格的行为*/
vertical-align:middle; /*垂直居中*/
text-align:center; /*水平居中*/

固定高度的盒子内水平垂直文本和图片

p{border:1px solid; width:500px; height:200px; text-align:center; line-height:200px; }
img{vertical-align:middle;}
<p>这是一张<img src="yahoo.png">图片</p>

总结:居中的元素不能是块元素,可以是inline或者inline-block元素;如果同时有多张图片需要居中,那没就可以用一个外部盒子将多张图片包住,当作一张图片来处理。

高度不确定的:

就在图片的css中加 dispaly:block;margin:0 auto;

垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。

posted @ 2017-01-03 08:46  叶子陪你玩  阅读(276)  评论(0编辑  收藏  举报