css 小知识点:inline/inline-block/line-height

2018-08-26 17:21:52来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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,简单易懂,没那么多妖娥子。 只是现在兼容性不太好, 无奈脸。。。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Python开发【前端篇】HTML

下一篇:css选择器的优先级