码迷,mamicode.com
首页 > Web开发 > 详细

css-元素水平、竖直居中

时间:2016-04-19 13:45:11      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

一、水平居中

1.文本图片水平居中

给父级元素设置text-align:center;

2.确定宽度的块级元素居中

设置自身margin-left:auto;margin-right:auto;别忘了设置自身宽度;

3.不确定宽度的块级元素的居中

(1)用table帮助实现不确定宽度块级元素居中

<table><tr><td>块级元素</td></tr></table>

设置table元素margin-left:auto;margin-right:auto;

(2)设置父级元素text-align:center;然后自身display:inline;

(3)父元素设置float:left;position:relative;left:50%;自身设置position:relative;left:-50%;

二、竖直居中

1.父级元素高度确定的单行文本

给父级元素设置行高等于父级元素高度;

2.给父级元素设置相同的padding;

3.父元素高度确定的多行文本、图片、块级元素的竖直居中

(1)vertical-align属性只有在父元素为td、th时才生效,其它元素默认不支持vertical-align;在firefox和IE8下可以设置display:table-cell,来激活vertical-align属性,当时IE6、7不支持display:table-cell,所以我们用最原始的笨办法,直接使用表格

<table><tr><td>元素</td></tr></table>   td默认设置了vertical-align:middle;

(2)firefox和IE8用vertical-align:middle;display:table-cell;在IE6、7中用hack;

        .wrap{width:500px;height:200px;display:table-cell;vertical-align:middle;*position:relative;}
        .verticalWrap{*position:absolute;*top:50%;}
        .vertical{*position:relative;*top:-50%;}

 

原文地址:http://blog.csdn.net/fanhaiwang520/article/details/8682258

css-元素水平、竖直居中

标签:

原文地址:http://www.cnblogs.com/applecat/p/5407575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!