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

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

<div class" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 兩分鐘帶你了解在CSS中三種使圖片居中的方法

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

時間：2023-07-03 19:57:02 | 來源：網(wǎng)站運營

時間：2023-07-03 19:57:02 來源：網(wǎng)站運營

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

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

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;}效果圖如下：

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

關鍵詞：圖片,居中,方法

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉