首頁 > 文章 > web前端 > 淺談css中vertical-align和line-height的用法介紹

淺談css中vertical-align和line-height的用法介紹

高洛峰原創: 2017-03-07 11:49:471332瀏覽

（1）、將一個圖片放入一個p塊中，p塊背景顏色設定為aquamarine。將會發現圖片與p塊下邊緣有一定間隙。

實例：

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
        }   
        img {   
            width: 300px;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
    </p>
</body>
</html>

（2）、p區塊的圖片後面放入一個span標籤，內容為xxxx!,會發現span標籤內的元素與圖片是在底線對其的，當給span加一個背景時，可以看到圖片底部是與字母x底部對齊的。

實例：
　　淺談css中vertical-align和line-height的用法介紹

實例：放大之後可以很明顯的看出來！

　　　　　　淺談css中vertical-align和line-height的用法介紹

#程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
        }   
        img{   
            width: 300px;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

為什麼會出現這種現象呢？

答案：原因是行內元素預設都會受vertical-align（垂直對齊方式）和line-height（行高）的影響，而vertical-align預設的對齊方式是baseline ,即基線對齊。這個基線就是span標籤裡的字母X的下邊緣，故圖片底部是與字母底部相對齊的（不是與span標籤的背景對齊）。又因為字母本身有line-height（行高）值，所以span標籤加上背景後面比字母高一些。

解決方法：（四種方法任一都可解決該問題）

（1）、整個p內的font -size設定為0;

（2）、將圖片img變成區塊級元素，即設定其為display:block;

（3）、給p設定一個行高（值盡量小些），設定為line-height:5px;

（4）、設定圖片img垂直對齊方式vertical-align,值為top/middle/bottom任一個都可以（為了覆蓋預設的值baseline）;

效果如下：

　淺談css中vertical-align和line-height的用法介紹

#完整程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
            /*line-height: 5px;*/   
            /*font-size: 0;*/   
        }   
        img{   
            width: 300px;   
            /*display: block;*/   
            vertical-align: bottom;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

淺談css中vertical-align和line-height的用法介紹

# ##########2、圖片垂直居中的問題############在p和img中加入以下屬性及屬性值即可實現圖片在p區塊中的垂直居中。 ###

<style type="text/css">
...   

p{   
    line-height: 500px;   
    font-size: 0px;   
}   
img{   
    vertical-align: middle;   
}   

...   
<style>

#########　#########程式碼如下：###

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中vertical-align和line-height的用法</title>
    <style>
        *{   
            margin: 0px;   
            padding: 0px;   
        }   
        p{   
            background-color: aquamarine;   
            line-height: 500px;   
            font-size: 0px;   
        }   
        img{   
            width: 300px;   
            vertical-align: middle;   
        }   
        span{   
            background-color: azure;   
        }   
    </style>
</head>
<body>
    <p>
        <img src="./131796750659172.jpg" alt="picture">
        <span>xxxxx!</span>
    </p>
</body>
</html>

#########以上這篇淺談css中vertical-align和line -height的用法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。 ######更多淺談css中vertical-align和line-height的用法介紹相關文章請關注PHP中文網！ ###

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解box-sizing的全面分析下一篇：詳解box-sizing的全面分析

看更多