CSS属性:vertical-align:middle,设置为什么无效!
2017-04-14 10:27
471 查看
最近,在学习CSS中,每次对一个页面进行排版的时候,总是需要对文字居中,每次在div里面设置text-align和vertical-algin两个属性就会以为他会居中!
废话不多说了!直接上代码!
图一:
图二:
图三:
这是外面一个div里面在分几个div,我在其中一个中输入文字,但是写了text-align即文字居中和vertical-align垂直居中,以为就会让文字居于正中间,但是却显示如图二的效果!这是为什么呢!所以查找了许多资料,原来vertical-align属性只对行内元素有效,对块内元素无效!而此时就会用到display属性,大家也看到我里面有设置display属性为inline-block属性,确没有效果,那是因为将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内!说的通俗点,就是你设置的当前div属性还是块对象呈递,但是允许同一级别的div在同一行内,也可以设置宽度和高度!所以才会呈现如上图二所示的没有效果!
解决办法:
1.而如果我们将display属性设置为table-cell,将块元素转化为单元格,然后加上vertical-align:middle,就可以了呈现图三的效果了。(温馨提示:但是你们别忘记加text—align属性为center哟!)、
2.或者可以设置行高即line-height,但是要注意,要与div的高度一致!否则也会有偏差的(温馨提示:而display:inline-block是这个)!
废话不多说了!直接上代码!
图一:
图二:
图三:
这是外面一个div里面在分几个div,我在其中一个中输入文字,但是写了text-align即文字居中和vertical-align垂直居中,以为就会让文字居于正中间,但是却显示如图二的效果!这是为什么呢!所以查找了许多资料,原来vertical-align属性只对行内元素有效,对块内元素无效!而此时就会用到display属性,大家也看到我里面有设置display属性为inline-block属性,确没有效果,那是因为将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内!说的通俗点,就是你设置的当前div属性还是块对象呈递,但是允许同一级别的div在同一行内,也可以设置宽度和高度!所以才会呈现如上图二所示的没有效果!
解决办法:
1.而如果我们将display属性设置为table-cell,将块元素转化为单元格,然后加上vertical-align:middle,就可以了呈现图三的效果了。(温馨提示:但是你们别忘记加text—align属性为center哟!)、
2.或者可以设置行高即line-height,但是要注意,要与div的高度一致!否则也会有偏差的(温馨提示:而display:inline-block是这个)!
相关文章推荐
- div中的图片居中对齐 or vertical-align:middle 属性设置无效
- css中图片于文本的基线对齐与vertical-align属性设置
- 让 CSS 的 "vertical-align: middle" 属性支持 IE 6/7
- CSS 的 vertical-align 属性
- 让vertical-align: middle属性支持所有的浏览器
- 深入理解css中vertical-align属性
- 用Line box的方式理解CSS属性vertical-align
- inline-block 导致元素下沉 解决方法添加vertical-align:middle属性
- 简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
- CSS实现垂直居中,vertical-align:middle怎么用
- [乐意黎]CSS属性探秘系列:vertical-align
- css基础 vertical-align 设置文字与textarea对齐的方式
- asp.net align=absMiddle属性设置
- css的vertical-align属性
- html-css表单的margin-right/padding-right属性设置无效解决办法
- CSS属性Vertical Align使用方法讲解
- CSS之vertical-align属性测试
- CSS标准:vertical-align属性
- CSS实例:vertical-align属性让网页层居中
- 2. 为input元素设置vertical-align:middle; 3. 为label元素设置vertical-align:middle;display:inline-block;