CSS3 Flex 弹性盒模型与文本内容居中

14,013次阅读
一条评论

共计 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/

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2014-12-23发表,共计1132字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(一条评论)
验证码
云库网 评论达人 LV.1
2015-10-04 10:34:38 回复
Firefox 40.0 Firefox 40.0 Windows 7 x64 Edition Windows 7 x64 Edition

这里有一篇关于居中的文章《CSS3 Flexbox轻松实现元素的水平居中和垂直居中》可以作为这里的补充说明!http://yunkus.com/article/css3/286.html

 Windows  Firefox  中国广东省珠海市电信