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

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

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

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

實例:

         淺談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;   
        }   
    </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