在工作時,我們經常會用圖片和文字來佈局,但是細心的小伙伴會發現,HTML默認情況下,圖片置頂對齊,文字置底對齊,所以當圖片高,文字低,就不能居中對齊。為了頁面的美觀,我們習慣設定圖片和文字對齊,那CSS中如何設定文字與圖片垂直居中呢? 有哪些方式讓文字與圖片垂直居中呢?
方法1:簡單粗暴的方式,直接用CSS屬性vertical-align: middle,程式碼如下:
<img src="img/second_logo.png" style="max-width:90%"/ alt="CSS中如何實現圖片與文字垂直居中,有哪些方式?" ><a href="#">哈哈哈</a>
效果圖:
方法2:如果圖片是透過背景圖片來新增的,可以用background,line-height=height設置,從而實現文字與圖片垂直居中對齊。程式碼如下:
HTML部分:
<div class="aa"> <a href="">哎呦呦</a> </div>
CSS部分:
.aa{ width: 200px; height: 100px; line-height: 100px; background: url(img/pic4.png) no-repeat left center; } .aa a{padding-left: 80px;}
效果圖:
##方法3:如果將圖片和文字放在兩個不同的div中,我們可以透過display: inline-block 和vertical-align: middle來設置,讓圖片和文字垂直居中,程式碼如下:
<div> <div class="aa"><img src="img/pic1.png" alt="CSS中如何實現圖片與文字垂直居中,有哪些方式?" ></div> <div class="bb"><a href="">啦啦啦</a></div> </div>
.aa{ display: inline-block; vertical-align: middle; } .bb{ display: inline-block; }
以上是CSS中如何實現圖片與文字垂直居中,有哪些方式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!