兩分鐘帶你了解在CSS中三種使圖片居中的方法

在做網(wǎng)頁(yè)美化的時(shí)候，都會(huì)用到圖片居中，那你知道在CSS中有哪三種使圖片居中的方法嗎？下面我們一起看看吧。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、三原網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、三原網(wǎng)絡(luò)營(yíng)銷、三原企業(yè)策劃、三原品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供三原建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

1.利用display:table-cell，具體代碼如下：

html代碼如下：

<div class="img_wrap">
　　<img src="wgs.jpg">
</div>

css代碼如下：

.img_wrap{
     width: 400px;
     height: 300px;
     border: 1px dashed #ccc;
     display: table-cell; //主要是這個(gè)屬性
    vertical-align: middle;
     text-align: center;
 }效果如下：

2.采用背景法：

html代碼如下：

<p class="img_wrap"></p>

css代碼如下：

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

效果如下圖：

3.圖片外面用個(gè)p標(biāo)簽，通過設(shè)置line-height使圖片垂直居中：

html代碼如下：

<div class="img_wrap">
    <p><img src="wgs.jpg"></p>
</div>

css代碼如下：

*{margin: 0px;padding: 0px}
.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    text-align: center;}
.img_wrap p{
    width:400px;
    height:300px;
    line-height:300px;  /* 行高等于高度 */
 }
.img_wrap p img{
    *margin-top:expression((400 - this.height )/2);  /* CSS表達(dá)式用來兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
 }

效果圖如下：

感謝大家的閱讀，希望大家收益多多

推薦教程：《CSS教程》

標(biāo)題名稱：兩分鐘帶你了解在CSS中三種使圖片居中的方法
文章起源：http://muchs.cn/article44/chsphe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站收錄、ChatGPT、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)