CSS居中的方法整合--水平居中
2015-07-16 20:20
513 查看
原文
CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷。是水平居中还是垂直居中?是block还是inline?
居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定。
这里就从这些方面对这些各种CSS的居中方法进行一些整理。
(其中inline类型可以包括inline, inline-block, inline-table, inline-flex)
Example
但这种情况需要为block类型的元素设置一个宽度,否则这个元素会填满整个上级div
Example
如果不设置宽度,也有种办法实现居中,就是将居中元素的display属性设置为table
Example
inline-block:
Example
flex:
Example
如果多个block元素排成一竖列并且居中,这时使用margin:0 auto即可实现
如果div无固定宽度,可以使用display:table属性
有固定宽度:
Example
无固定宽度:
Example
CSS的居中问题,是一个老生常谈的问题,各种居中方法层出不穷。是水平居中还是垂直居中?是block还是inline?
居中对象是一个还是多个?长度宽度是否确定?等等各种因素确定。
这里就从这些方面对这些各种CSS的居中方法进行一些整理。
1.1 inline类型元素
对于inline类型的元素,在上级div使用text-align属性是很不错的选择(其中inline类型可以包括inline, inline-block, inline-table, inline-flex)
.parent { text-align: center; }
Example
1.2 block类型元素
对于block类型的元素,可以对要居中的元素使用margin: 0 auto;属性但这种情况需要为block类型的元素设置一个宽度,否则这个元素会填满整个上级div
.child { margin: 0 auto; }
Example
如果不设置宽度,也有种办法实现居中,就是将居中元素的display属性设置为table
Example
1.3 多个block类型元素
如果有多个block级元素排列成一行(注意是排列成一行)并且居中,这时需要改变一下block元素的类型,可以使用inline-block和flex两种方法实现inline-block:
.parent { text-align: center; }
.child {
display: inline-block;
}
Example
flex:
.parent { display: flex; justify-content: center; }
Example
如果多个block元素排成一竖列并且居中,这时使用margin:0 auto即可实现
如果div无固定宽度,可以使用display:table属性
有固定宽度:
Example
无固定宽度:
Example
相关文章推荐
- CSS规范和最佳实践(转)
- 实习日记五、依旧是CSS的运用
- css基础学习之--inline-block
- css基础学习之--inline-block
- CSS居中初探
- css3中transform对位置的应用
- CSS3-手风琴效果
- 神奇的CSS3选择器
- 纯css提示效果 提示层
- 总结CSS3新特性(媒体查询篇)
- 前端样式--px与em使用选择
- 常用的css3样式
- 跨浏览器的CSS渐变解决方案
- 纯CSS二级纵向菜单
- 常用base.css
- form表单样式
- css浮动
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动条
- CSS浮动属性Float到底什么怎么回事,下面详细解释一下
- 什么是CSS清除浮动?