建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了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)站價格咨詢:18982081108vertical-align屬性
我們使用text-align屬性來定義圖片水平對齊方式。
大家就開始有疑問了，圖片水平對齊我們實現(xiàn)了，那如果想對圖片進行垂直對齊呢？
在CSS中，我們可以使用vertical-align屬性來定義圖片的垂直對齊方式。
語法：vertical-align:屬性值;
vertical-align還有sub、super等一些屬性值，對于這些我們不需要去理會，因為在實際開發(fā)中壓根兒用不上。我們只需要使用以上這4個屬性值就完全足夠了。
舉例1:
vertical-align屬性
創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)（top）
創(chuàng)新互聯(lián)創(chuàng)新互聯(lián)（middle）
創(chuàng)新互聯(lián)創(chuàng)新互聯(lián)（bottom）
創(chuàng)新互聯(lián)創(chuàng)新互聯(lián)（baseline）
大家仔細觀察一下，“vertical-align:baseline”和“vertical-align:bottom”是有區(qū)別的。
舉例2：
vertical-align屬性
效果如下：
咦？！怎么回事？怎么圖片沒有按照預(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)用場景需求。
分享名稱：css圖片實現(xiàn)垂直對齊的方法-創(chuàng)新互聯(lián)
文章來源：http://fisionsoft.com.cn/article/dhggdp.html
