文字垂直居中
2012-01-19 15:13
127 查看
IE6/IE7通过定位实现,IE8及以上、firefox、chrome等通过display:table-cell实现。
结构:
样式:
结构:
<div class="box"> <div><span>dddfff <br />dssdsd <br />ssd</span></div> </div>
样式:
.box{width:200px;height:200px;background-color:#aaa;display:table;position:relative;} .box div{display:table-cell;vertical-align:middle;} *html .box div{position:absolute;top:50%;} *html .box span{position:relative;top:-50%;} *:first-child+html .box div{position:absolute;top:50%;} *:first-child+html .box span{position:relative;top:-50%;}
相关文章推荐
- 如何设置a标签的宽高,如何使a标签的文字垂直居中
- IE6.0输入框中文字垂直居中解决方案
- ff下button按钮上的文字垂直居中
- 大小不固定的图片、多行文字的水平垂直居中
- div+css文字垂直居中
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- 【前端】三种方法将文字垂直居中
- css实现固定高度及未知高度文字垂直居中的完美解决方案
- 固定高度不确定文字行数的垂直居中问题
- 大小不固定的图片、多行文字的水平垂直居中
- 文字垂直居中常用技巧
- 让Div里的文字垂直居中的方法
- 00002、div的文字垂直居中与背景的渐变
- 关于文字的垂直居中
- 换行文字、未知宽高图片垂直居中完美解决方案
- 关于DIV内文字垂直居中的写法
- Display: table-cell实现img、文字垂直居中
- 图片和文字垂直居中的方法
- css总结(1) -文字垂直居中、内标签宽、clear
- 文本文字在DIV中垂直水平居中显示