网站搭建推广优化,国内十大saas平台,中国机械加工网站官网,网站开发分析文章参考 http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html http://www.blueidea.com/tech/web/2006/3231.asp 一、单行垂直居中 如果一个容器中只有一行文字#xff0c;对它实现居中相对比较简单#xff0c;我们只需要设置它的实际高度height和所在行的高度l… 文章参考 http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html http://www.blueidea.com/tech/web/2006/3231.asp 一、单行垂直居中 如果一个容器中只有一行文字对它实现居中相对比较简单我们只需要设置它的实际高度height和所在行的高度line-height相等即可。 div {
height:25px;
line-height:25px;
overflow:hidden;
} 二、多行未知高度文字的垂直居中 如果一段内容它的高度是可变的那么我们就是设定Padding使上下的padding值相同即可。同样的这也是一种“看起来”的垂直居中方式它只不过是使文字把div完全填充的一种访求而已 .middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
} 优点 1. 同时支持块级和内联极元素 2. 支持非文本内容 3. 支持所有浏览器 三、使用table居中对齐的方式 但是在CSS中还有一个display属性能够模拟table所以我们可以使用这个属性来让div模拟table就可以使用vertical-align了。注意display:table和display:table-cell的使用方法前者必须设置在父元素上后者必须设置在子元素上因此我们要为需要定位的文本再增加一个div元素 .middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
} 可惜IE不支持这些属性不过在其他浏览器上显示效果非常完美。 要注意的是和一个合法的td元素必须在table里一样display: table-cell 元素必须作为 display: table 的元素的子孙出现。 备注说明表格是可以左右自动等高的所以当一侧的内容增多时两侧都会自动等高。 例子 style typetext/css
.line_height_1{
border: 1px solid red;
width: 500px;
height: 200px;
line-height: 200px;
}
.padding_div{
border: 1px solid blue;
padding : 50px 0px;
width: 200px;
}
.div_table{
display: table;
}
.div_cell{
display: table-cell;
border: 1px solid green;
}
/style
/head
body
div classline_height_1
单行内容垂直居中使用line-height 与 height属性的值一致即可
/div
p
p
div classpadding_div
1、保证div上下padding一致br
2、div里面的内容是不确定的高度会被内容撑开br
/div
p
p
div classdiv_table
div classdiv_cell stylevertical-align: middle
垂直居中的内容
/div
div classdiv_cell
随机的内容br
随机的内容br
span stylecolor: redIE6 不支持display:table/spanbr
随机的内容br
随机的内容br
随机的内容br
/div
/div
/body
