CSS3新方法,文本居中显示
在CSS3之前有这样一个属性可以控制文本的显示效果
text-align : center
- 1
- 1
this is title
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
文章图片
可以发现标题只是水平居中了,并没有垂直居中。
刚才说了那只是css3之前的方法,也就是说text-align:center只能对水平居中有效,不能垂直居中。
OK,CSS3新特性可以做到水平垂直居中,先看源码吧!
webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
"
>
this is title
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
文章图片
在CSS3垂直居中方法如下:
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
推荐阅读
- 第二阶段day1总结
- iOS富文本为html时,修改默认字体颜色
- Mac下怎么新建|Mac下怎么新建 .txt 文本文件
- 使用NSAttributedString富文本踩到的坑
- Android将文本中的URL转换为超链接工具类(原文本有超链接标签也适用)
- r语言|手把手(R语言文本挖掘和词云可视化实践)
- 论文查重python文本相似性计算simhash源码
- 21.css3轮播效果
- 3d灵动的book
- 25|25 CSS3中的3D转换