简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
2016-04-03 17:40
906 查看
前言:在很多情况下,我们要使用到内容的居中,这里的居中包括了垂直居中和水平居中,下面来浅谈一下
对于水平居中的属性text-align和垂直居中属性vertical-align的理解
(1)text-align
如果要实现水平居中,比如我们要实现块状元素(block)内,子元素的水平居中
<div class="div1">
<div class="div2">
</div>
</div>
比如我们要实现div2元素在父元素div1内的居中,我们则会有:
.div2{
display:inline-block
}
并且要设置父元素的属性即:
.div1{
text-align:center
}
实现效果为:
关键:要实现这种水平居中,在设置父元素具有text-align:center属性的基础上,必须设置子元素(要居中
的元素)的display:inline-block或者display:inline,即只能实现行内块的水平居中。
(2)vertical-align
这里简单的说一下,vertical-align属性实现垂直居中
<div class="div1">
<div class="div2">
</div>
</div>
要实现div1父元素内的子元素div2,让div2实现垂直居中,我们可以这样设置:
.div1{
display:table-cell;
vertical-align:middle;
}
实现的效果为:
注:简单的实现垂直居中,我们可以发现并不需要对子元素进行特殊设置,我们只需要设置父元素的
display:table-cell;vertical-align:middle 之后就能实现垂直方向的居中。(这种方式实现的垂直居中,会
导致水平不居中)
(3)补充
1.父元素设置属性为text-align:center,并设置子类快为inline-block那么,子类3个块都会实现水平居中
2.父元素设置为line-height:= height: 并设置子类块属性为inline-block,那么子类的所有都能实现垂直居中
3.对于text-align:center,如果父类元素的display:inline-flex,则子元素不能实现水平居中
2017.1.13补充,line-height:100px设置行高,此时给定了基线,此时如果要实现居中,只需要让基线居中, 通过设置vertical-align:middle
对于水平居中的属性text-align和垂直居中属性vertical-align的理解
(1)text-align
如果要实现水平居中,比如我们要实现块状元素(block)内,子元素的水平居中
<div class="div1">
<div class="div2">
</div>
</div>
比如我们要实现div2元素在父元素div1内的居中,我们则会有:
.div2{
display:inline-block
}
并且要设置父元素的属性即:
.div1{
text-align:center
}
实现效果为:
关键:要实现这种水平居中,在设置父元素具有text-align:center属性的基础上,必须设置子元素(要居中
的元素)的display:inline-block或者display:inline,即只能实现行内块的水平居中。
(2)vertical-align
这里简单的说一下,vertical-align属性实现垂直居中
<div class="div1">
<div class="div2">
</div>
</div>
要实现div1父元素内的子元素div2,让div2实现垂直居中,我们可以这样设置:
.div1{
display:table-cell;
vertical-align:middle;
}
实现的效果为:
注:简单的实现垂直居中,我们可以发现并不需要对子元素进行特殊设置,我们只需要设置父元素的
display:table-cell;vertical-align:middle 之后就能实现垂直方向的居中。(这种方式实现的垂直居中,会
导致水平不居中)
(3)补充
1.父元素设置属性为text-align:center,并设置子类快为inline-block那么,子类3个块都会实现水平居中
2.父元素设置为line-height:= height: 并设置子类块属性为inline-block,那么子类的所有都能实现垂直居中
3.对于text-align:center,如果父类元素的display:inline-flex,则子元素不能实现水平居中
2017.1.13补充,line-height:100px设置行高,此时给定了基线,此时如果要实现居中,只需要让基线居中, 通过设置vertical-align:middle
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析