CSS中如何實現圖片與文字垂直居中，有哪些方式?

在工作時，我們經常會用圖片和文字來佈局，但是細心的小伙伴會發現，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來設置，讓圖片和文字垂直居中，程式碼如下：

HTML部分：

<div>
    <div class="aa"><img  src="img/pic1.png" alt="CSS中如何實現圖片與文字垂直居中，有哪些方式?" ></div>
    <div class="bb"><a href="">啦啦啦</a></div>
</div>

CSS部分：

.aa{
    display: inline-block;
    vertical-align: middle;
    }
 .bb{
     display: inline-block;
     }

效果圖：

總結：以上介紹了不同的方式實現圖片與文字垂直居中，不同的頁面佈局使用的方法也有所不同，使用時應該選擇適合自己的方法，希望這個教程可以幫助到你！

以上是CSS中如何實現圖片與文字垂直居中，有哪些方式?的詳細內容。更多資訊請關注PHP中文網其他相關文章！