css圖片實現(xiàn)垂直對齊的方法-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站制作與策劃設(shè)計,會澤網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:會澤等地區(qū)。會澤做網(wǎng)站價格咨詢:18982081108

vertical-align屬性

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

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

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

語法：vertical-align:屬性值;

vertical-align還有sub、super等一些屬性值，對于這些我們不需要去理會，因為在實際開發(fā)中壓根兒用不上。我們只需要使用以上這4個屬性值就完全足夠了。

舉例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>
    創(chuàng)新互聯(lián)<img id="img_1" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>創(chuàng)新互聯(lián)（<strong>top</strong>）
    <hr/>
    創(chuàng)新互聯(lián)<img id="img_2" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>創(chuàng)新互聯(lián)（<strong>middle</strong>）
    <hr/>
    創(chuàng)新互聯(lián)<img id="img_3" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>創(chuàng)新互聯(lián)（<strong>bottom</strong>）
    <hr/>
    創(chuàng)新互聯(lián)<img id="img_4" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>創(chuàng)新互聯(lián)（<strong>baseline</strong>）
</body>
</html>

大家仔細觀察一下，“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圖片實現(xiàn)垂直對齊的方法

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：css圖片實現(xiàn)垂直對齊的方法-創(chuàng)新互聯(lián)
文章源于：http://muchs.cn/article18/dhggdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站營銷、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容