首頁 > web前端 > css教學 > CSS中如何實現圖片與文字垂直居中,有哪些方式?

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

yulia
發布: 2018-09-12 16:00:48
原創
4528 人瀏覽過

在工作時,我們經常會用圖片和文字來佈局,但是細心的小伙伴會發現,HTML默認情況下,圖片置頂對齊,文字置底對齊,所以當圖片高,文字低,就不能居中對齊。為了頁面的美觀,我們習慣設定圖片和文字對齊,那CSS中如何設定文字與圖片垂直居中呢? 有哪些方式讓文字與圖片垂直居中呢?

方法1:簡單粗暴的方式,直接用CSS屬性vertical-align: middle,程式碼如下:

<img  src="img/second_logo.png"   style="max-width:90%"/ alt="CSS中如何實現圖片與文字垂直居中,有哪些方式?" ><a href="#">哈哈哈</a>
登入後複製

效果圖:

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

方法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;}
登入後複製

效果圖:

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

##方法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中如何實現圖片與文字垂直居中,有哪些方式?

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板