共计 1132 个字符,预计需要花费 3 分钟才能阅读完成。
实现文本水平和垂直居中的方法有很多,但都是通过各种技巧来实现,优劣点都会存在。
CSS3 Flex 弹性盒模型在 IE11 及其他现代浏览器中已广泛支持,其丰富的功能和繁多的属性定义,使得入门起来有点抽象难懂。
这里只通过示例简单介绍使用 CSS3 Flex 弹性盒布局方式,实现文本居中的方法。
CSS 核心代码:
display: flex; | |
align-items: center; | |
justify-content: center; |
对于有的浏览器(版本),以上代码或许还需要添加其特有的前缀(如 -webkit-, -ms- 等),这一点你应该了解。
示例如下:
<style type="text/css"> | |
.flex-center{ | |
width: 400px; | |
height: 200px; | |
margin: auto; | |
background: rgba(255,255,0,.3); | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
</style> | |
<div class="flex-center"> | |
[display:flex]: 看我是否居中了 | |
</div> |
[display:flex]: 看我是否居中了
没了?对,就这么简单。
display 伸缩盒布局的取值
box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) | |
inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3) | |
flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) | |
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3) | |
flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3) | |
inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本) |
如果你想详细的了解和学习 CSS 实现文本居中的方法,可以参考这里:
http://blog.csdn.net/freshlover/article/details/11579669
如果你对 css3 flex 还不太了解,可以前往如下地址进行简单的入门:
http://lzw.me/pages/css3/properties/flex/
http://www.w3.org/html/ig/zh/css-flex-1/
http://www.w3.org/TR/css3-flexbox/
正文完