淺析vertical-align屬性

一、摘要

　　vertical-align用來指定行內元素（inline）行內塊元素（inline-block）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對於塊級元素，vertical-align是不起作用的。

二、作用

1.實現多行文本垂直居中：

.shadow{
     width: 50%;
     height: 300px;
     padding:10px;
     text-align: center;
     background: pink;
 }
 .shadow i{
     display: inline-block;
     height: 100%;
     vertical-align: middle;
 }
 .shadow span{
     display: inline-block;
     line-height: 1.8rem;
     vertical-align: middle;
 }

<div class="shadow">
    <i></i><span>lallalala啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦，我是特別長特別長的文本</span>
</div>

　<!-- <i><span>不能換行，否則會失效，我也不知道為啥。 -->

還有一種簡單的文本垂直居中的方法就是對容器元素設置如下的屬性即可：

<div class="shadow">
    lallalala啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
</div>

 .shadow{
     width: 300px;
     height: 300px;
     padding:10px;
     text-align: center;
     background: pink;
     display: table-cell;vertical-align: middle;
 }

效果如下：

 

 

2.小圖標與文本橫向對齊：

<div class="shadow">
    <img src="./1569552386(1).png" alt="">我想在圖片的中間
</div>

.shadow img{
     width: 300px;
     height: 300px;
     border:1px solid #000;
 }

效果如圖1：

  圖1            

                                                                                                                                         圖2

.shadow img{
     width: 300px;
     height: 300px;
     border:1px solid #000;
     vertical-align:-150px;        /*負值會使圖片向下移動*/
 }

加上vertical-align負值，可以進行精准的縱向偏移調整，從而實現效果圖2.

 

3.實現上標或者下標文字：

在HTML中，<sub>和<sup>分別表示下標和上標，實際上，這兩個元素是因為具有以下的瀏覽器默認樣式，所以，完全可以對其他元素設置這樣的樣式將其變成上標或下標。

<div class="shadow">
    <p>這是一行文本 <i class="sub">2</i></p>
    <p>這是一行文本 <i class="sup">3</i></p>
</div>

.shadow .sub{
     vertical-align: sub;font-size: smaller;
 }
 .shadow .sup{
     vertical-align: super;font-size: smaller;
 }

效果圖如下：