溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css圖片實(shí)現(xiàn)垂直對(duì)齊的方法

發(fā)布時(shí)間：2020-08-29 14:56:27 來源：億速云 閱讀：219 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css圖片實(shí)現(xiàn)垂直對(duì)齊的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

vertical-align屬性

我們使用text-align屬性來定義圖片水平對(duì)齊方式。

大家就開始有疑問了，圖片水平對(duì)齊我們實(shí)現(xiàn)了，那如果想對(duì)圖片進(jìn)行垂直對(duì)齊呢？

在CSS中，我們可以使用vertical-align屬性來定義圖片的垂直對(duì)齊方式。

語法：vertical-align:屬性值;

vertical-align還有sub、super等一些屬性值，對(duì)于這些我們不需要去理會(huì)，因?yàn)樵趯?shí)際開發(fā)中壓根兒用不上。我們只需要使用以上這4個(gè)屬性值就完全足夠了。

舉例1:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>vertical-align屬性</title>
    <style type="text/css">
        img{width:80px;height:80px;}
        #img_1{vertical-align:top;}
        #img_2{vertical-align:middle;}
        #img_3{vertical-align:bottom;}
        #img_4{vertical-align:baseline;}
    </style>
</head>
<body>
    億速云<img id="img_1" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>top</strong>）
    <hr/>
    億速云<img id="img_2" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>middle</strong>）
    <hr/>
    億速云<img id="img_3" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>bottom</strong>）
    <hr/>
    億速云<img id="img_4" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>baseline</strong>）
</body>
</html>

大家仔細(xì)觀察一下，“vertical-align:baseline”和“vertical-align:bottom”是有區(qū)別的。

舉例2：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>vertical-align屬性</title>
    <style type="text/css">
        div
        {
            width:100px;
            height:80px;
            border:1px solid gray;
        }
        .div_img1{vertical-align:top;}
        .div_img2{vertical-align:middle;}
        .div_img3{vertical-align:bottom;}
        img{width:60px;height:60px;}
    </style>
</head>
<body>
    <div class="div_img1">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
    <div class="div_img2">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
    <div class="div_img3">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
</body>
</html>

效果如下：

css圖片實(shí)現(xiàn)垂直對(duì)齊的方法

咦？！怎么回事？怎么圖片沒有按照預(yù)期的進(jìn)行垂直對(duì)齊？啊，其實(shí)大家誤解了vertical-align屬性了，vertical-align屬性定義是：vertical-align屬性定義行內(nèi)元素相對(duì)于該元素的垂直對(duì)齊方式。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css圖片實(shí)現(xiàn)垂直對(duì)齊的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手