當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

已知图片大小，让其在页面中垂直水平居中

發布時間：2024/4/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了已知图片大小，让其在页面中垂直水平居中小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天在做項目的時候，遇到一個圖片水平垂直居中的問題，要解決這個問題筆者想到了一個很簡單的辦法。

首先我們把頁面的框架做出來，上代碼：

<html><head><title>圖片水平垂直居中</title><style>.my_div{width:1000px;height:700px;border:1px?solid?red;position:relative;}.my_img{display:block;width:400px;height:300px;position:absolute;left:50%;?????????????//絕對定位讓圖片距離左邊50%top:50%;???????????????//同上margin-left:?-200px;????????//還要減去圖片寬度的一半margin-top:-150px;????????????//同上}</style></head><body><div?class="my_div"><img?class="my_img"?src="weixin.png"?/></div></body> </html>

這樣就實現了我們的要求了，大家仔細看嵌入到里邊的css代碼，不難發現，我把圖片采用了絕對定位，讓它的left和top都等于50%，但是這并不意味著圖片就水平和垂直居中了，此時可以巧妙的才用負的margin（可能有很多小朋友還不知道margin有負的這種寫法，不懂就問度娘吧）來減去圖片寬高的一半，然后，目的就達到了，是不是 so easy 啊！

舉一反三：不僅僅只適用于圖片外邊是div（盒子）的模型，還可以相對于整個窗口居中，都是類似的（讓圖片position:fised；就OK了）

轉載于:https://blog.51cto.com/10271962/1717364

總結

以上是生活随笔為你收集整理的已知图片大小，让其在页面中垂直水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。