CSS设置多行文本垂直居中的方法
2013-12-09 17:41
721 查看
单行文本居中比较简单,就是将line-height设置成和height一样就可以了,但是对于多行文本,这种方式就行不通了,除了第一行,下面的就都看不到了。
多行文本垂直居中的CSS需要这么设置:
如果这个div必须浮动,那么可以在里面再嵌套一个div。这种方法有一个问题,就是width和height必须固定,否则无法实现居中。
父div再设置一个display: table的属性。这种方法还有一个问题,就是overflow属性不起作用了,这就是把div设置成table-cell的后果,所以如果要实现overflow:hidden,还需要在里面设置一个div,单独设置overflow:hidden的属性。
多行文本垂直居中的CSS需要这么设置:
/*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; height: 102px; vertical-align: middle; display: table-cell; overflow: hidden; }
如果这个div必须浮动,那么可以在里面再嵌套一个div。这种方法有一个问题,就是width和height必须固定,否则无法实现居中。
父div再设置一个display: table的属性。这种方法还有一个问题,就是overflow属性不起作用了,这就是把div设置成table-cell的后果,所以如果要实现overflow:hidden,还需要在里面设置一个div,单独设置overflow:hidden的属性。
相关文章推荐
- DIV CSS布局中position属性用法深入探究
- CSS display:inline和float:left两者区别探讨
- CSS实现的div悬浮框并且兼容IE6的样式
- js获取css属性
- hack fixed
- css样式单位取整,去掉'px'
- 第三方文本框 在div中显示预览,让指定节点不受外部css影响
- 如何去掉超链接下划线小集锦
- css
- a标签样式 和 a标签属性写法
- IE 兼容模式样式出问题
- css 选择器
- CSS实现div悬浮框的代码(兼容IE6)
- 键盘样式风格设置
- CSS3实现文字描边
- dedecms根据不同栏目导航显示不同的样式
- css 随滚动条固定浮动position:fixed;
- 零点起飞学HTML+CSS
- 输写CSS样式规范之道
- 常用CSS缩写语法总结