css line-height小酌

1.行高的實際應用

1.1.一個空的div，打開浏覽器看什麼都會沒有，給他嵌套個字型啊，就能撐開啊

好，兄弟來，試試看看行不行？
div {
  line-height: ;
  background: #f00;
}

或，
div {
  font-size: ;
  background: #f00;
}
           

實際上上面2個，div的高變成了0；那到底是什麼把div撐開了呢？行高嗎？我覺得既然font-size: 0的時候，那麼字型就是沒有了，當line-height:0;的時候字型有，但背景色沒有出來，那就應了大家所說的應該是line-height起作用啦

2.垂直居中？

2.1.line-height

div {
  display: inline-block;
  background: red;
  width: px;
  height: px;
  line-height: px;
  text-align: center;
}
           

2.2.多行文字垂直居中 - table方法

<style>
  .box-1 {
    display: table;
    text-align: center;
    width: px;
    height: px;
    border-radius: px;
    background: red;
  }

  .item-1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: px;
    font-weight: ;
  }
</style>
           

<section class="box-1">
  <div class="item-1">
    梁鳳波
  </div>
</section>
           

圖檔垂直居中同理，vertical-align:middle;

3.CSS文法 Vertical-align:垂直居中

來源于w3c

3.1.定義和用法 vertical-align 屬性設定元素的垂直對齊方式。

說明

該屬性定義行内元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格内容的對齊方式。

預設值： baseline

繼承性： no

版本： CSS1

JavaScript 文法： object.style.verticalAlign=”bottom”

值	描述
baseline	預設。元素放置在父元素的基線上。
sub	垂直對齊文本的下标。
super	垂直對齊文本的上标
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字型的頂端對齊
middle	把此元素放置在父元素的中部。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字型的底端對齊。
length
%	使用 “line-height” 屬性的百分比值來排列此元素。允許使用負值。
inherit	規定應該從父元素繼承 vertical-align 屬性的值。