文章内容

2016/12/29 13:02:44,作 者: 黄兵

CSS 实现水平和垂直居中

用CSS 实现垂直居中也不简单。如果你想在一个固定高度的元素内垂直居中一行文本,可以把

这一行文本的line-height 设定为该元素的高度。假设元素高度为300 像素,可以这样写:

text-align:center; /*水平居中*/

line-height:300px; /*垂直居中:行高=容器高度*/

如果想垂直居中其他元素,比如图片,可以将容器的display 属性设定为table-row,再设定

(只对单元格有效的)vertical-align 属性为middle,比如:

display:table-cell; /*借用表格的行为*/

vertical-align:middle; /*垂直居中*/

text-align:center; /*水平居中*/

尽管这些方案都不够自然,但CSS 没提供什么垂直定位元素的属性,也就只能这么将就了。

CSS3盒阴影
CSS3文字阴影
分享到:

发表评论

评论列表