App下載

CSS怎么讓圖片居中？如何讓圖片居中顯示

猿友 2021-03-16 10:17:20 瀏覽數(shù) (13010)
反饋

眾所周知，HTML 和 CSS 結(jié)合后功能強(qiáng)大，可以做出千變?nèi)f化的樣式，那么你知道如何用 CSS 讓圖片居中顯示嗎？本篇文章告訴你

一、display:table-cell

HTML 代碼如下：

<div class="img_wrap">
      <img src="../images/w3cschool.png">
</div>

CSS 代碼如下

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }

效果圖：

table-cell居中

二、采用背景法

html 代碼：

<div class="img_wrap"></div>

CSS 代碼：

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    background: url("../images/w3cschool.png") no-repeat center center;
    }

效果圖：

背景法居中

三、line-height

此方法是在圖片外用 p 標(biāo)簽，通過(guò)設(shè)置 line-height 使圖片垂直居中：

HTML 代碼：

<div class="img_wrap">
        <p><img src="../images/ss.png" alt=""></p>
</div>

CSS 代碼：

.img_wrap{
    width:700px;
    height:350px;
    border:1px dashed #ccc;
    text-align: center;
}
.img_wrap p{
     width: 700px;
     height:350px;
     line-height: 350px;
}
.img_wrap p img{
     vertical-align: middle;
}

效果圖：

line-height居中

以上就是三種使用 CSS 讓圖片居中的詳細(xì)方法，想要學(xué)習(xí)更多 CSS 相關(guān)教程可點(diǎn)擊：CSS微課、HTML+CSS基礎(chǔ)實(shí)戰(zhàn)


CSS

1 人點(diǎn)贊