``` <div> <span class="c1">hello world</span> </div> ``` ```css //css .c1{ line-height: 60px; } span{ background: red; } div{ border: 1px solid #333; } ``` ## 1.內聯元素在塊元素中垂直居中,使用_**line-height**_ 顯示結果  ## 2.vertical-align設置文字的垂直對齊屬性 ``` vertical-align:baseline //默認基線對齊 ``` eg: ```css //css span{ background: red; } .c1{ font-size: 20px; } .c2{ font-size: 30px; } .c3{ font-size: 40px; } ``` ```html //html <div> <span class="c1">第1</span> <span class="c2">第2</span> <span class="c3">第3</span> </div> ```  如何改為居中對齊,以下代碼 ``` span{vertical-align:middle} ```  ## 3.圖片與文字會有空隙 原理是什么 ``` <div> <span>美女</span> <img src="images/01.png" alt=""> </div> //css div{background:pink} ```  原因：將圖片識別為文字，默認是基線對齊的，所以會有3px左右的偏差。 如何解決：將圖片設為基線對齊 ``` img{vertical-align:bottom} ```