inline:
此元素会被显示为内联元素,元素前后没有换行符。因此:无法设置宽度和高度~
inline-block:
行内块元素。元素前后没有换行符(CSS2.1 新增的值)
用通俗的话讲,就是不独占一行的块级元素。然后拥有块级元素的属性,可以设置宽度和高度。
line-height:
- 对于块级元素,line-height指定了元素内部line-boxes的最小高度
- 对于非替代行内元素,line-height用于计算line-box的高度
-
对于替代行内元素,例如input、button,line-height没有影响
这个属性可以实现多行文本垂直居中:
<div class="box"><div class="content">基于行高实现的...</div>
</div>CSS:
.box {width: 280px;line-height: 120px;background-color: #f0f3f9; // 为了看到外面盒子margin: auto;
}
.content {display: inline-block; // 设置为内联元素,并且可以有块级属性line-height: 20px;margin: 0 20px;text-align: left;vertical-align: middle;
}
效果:
单行文本,垂直居中:
<div>单行文本垂直居中
</div>css:
div{background-color: #abcdef; // 为了看line-height: 400px; // 只需要设置line-height
}
效果图:
最 后结语: 实现垂直居中的方法,我还是最喜欢flex,简单易懂,没那么多妖娥子。 只是现在兼容性不太好, 无奈脸。。。
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h01k11j&title=css 小知识点:inline/inline-block/line-height