CSS多行文本垂直居中【转】
2015-06-10 15:39
495 查看
.outer { display:table; width:578px; overflow:hidden; background: #eee; height: 42px; } .middle {display:table-cell; vertical-align:middle; margin-left 10px;} /*下面的CSS是针对IE7,IE6*/ <!--[if lte IE 7]> <style> .outer{position:relative;} .middle{position: absolute; top: 50%;} .inner{position: relative; top:-50%} </style> <![endif]-->
以上是样式!~
这里我们需要定义三个DIV:
外层(outer) 可以根据需要定义高度、宽度,但是display必须为table。
中间层(middle) 可以有特定的CSS样式,例如:margin-left,但是display必须为table-cell,vertical-align必须为middle。
内层(inner) 主要是用来对付IE6和IE7的(注意:IE8支持table-cell居中,所以无需hack)。
有了上面的CSS,HTML代码可以这么写:
<div class="outer"> <div class="middle"> <div class="inner"> 把你要居中的文本放在这里 这是第二行 ... </div> </div> </div>
相关文章推荐
- 网页设计师必备的10个CSS技巧
- 纯CSS3悬停图标旋转导航动画代码
- 关于reset.css的那些事
- 自动截取文字,css实现文字超出显示省略汇总
- CSS3影子 box-shadow使用和技巧总结
- CSS3中Transition属性详解以及示例分享
- 网页设计师必备的10个CSS技巧
- 9种样式CSS3 渐变按钮集
- 【HTML+CSS】(1)基础语法
- CSS块元素与内联元素(转)
- css 时钟
- CSS3中的Transition属性详解
- Div+CSS网页制作误区
- table表格简单样式设置
- 同一个 HTML 元素引用样式的优先次序
- 纯css制作三角形
- CSS 清除浮动的写法
- CSS 常用到的一些技巧【转】
- CSS 中一些常见到的BUG及解决办法整理【转】
- css鼠标手型cursor