900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS样式让文字水平居中和垂直居中的方法

CSS样式让文字水平居中和垂直居中的方法

时间:2019-03-06 13:19:20

相关推荐

CSS样式让文字水平居中和垂直居中的方法

css中让文字居中,首先可以分单行文字和多行文字,还可以讨论高度是否固定。

不论是多行文字还是单行文字,水平居中都可以设置text-align。

text-align 属性规定元素中的文本的水平对齐方式。

垂直方向居中如下

一、高度固定

单行文字

垂直居中,则设置line-height等于盒子的高度。

.box {line-height:(height);}

多行文字

display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性破坏效果,应避免同时使用。

设置了display:table-cell的元素对宽度高度敏感,对margin值无反应。

.box {display: table-cell;vertical-align: middle;}

二、高度不固定

单行文字与多行文字的方法一样,

给盒子添加个内边距,让文字与边框之间有点距离。

.box {padding:20px;}

后期学习了新的方法再添加居中方法。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。