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

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

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; //主要是這個屬性
    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.圖片外面用個p標簽，通過設置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表達式用來兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
 }

效果圖如下：

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

推薦教程：《CSS教程》

標題名稱：兩分鐘帶你了解在CSS中三種使圖片居中的方法
文章起源：http://www.chinadenli.net/article44/chsphe.html

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

廣告

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