如何將圖像水平和垂直居中在div中
[英]How to center image in a div horizontally and vertically
問題描述
我的頁面中有以下標記代碼：
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
它並沒有像我預期的那樣出現，它看起來像那樣：
但我想得到這個結果：
如何水平和垂直居中顯示此圖像？
7 個解決方案
解決方案1
12 已采納 2012-04-24 10:34:40
這是一個如何在div中垂直和水平居中圖像的教程 。
這是你在找什么：
.wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: 200px; height: 200px; background-color: #999; } .wraptocenter * { vertical-align: middle; }
<div class="wraptocenter"> <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> </div>
解決方案2
6 2012-04-24 10:27:03
對於垂直對齊，我會包含一些CSS來從頂部50％定位它，然后將其向上移動圖像高度的一半。
水平，我會按照建議使用保證金。
因此，如果你的圖像是100x100px，你最終會得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
解決方案3
0 2015-04-10 13:58:45
您需要解決兩個方面。 第一方面是水平對齊。 這可以通過邊距輕松實現：自動應用於圖像本身周圍的div元素。 DIV需要將寬度和高度設置為圖像大小（否則這將無效）。 要實現垂直中心對齊，您需要在HTML中添加一些JavaScript。 這是因為在頁面啟動時不知道HTML高度大小，並且可能稍后更改。 最好的解決方案是使用jQuery並編寫以下腳本：$（window）.ready（function（）{/ * listen to window ready event - 在頁面加載后觸發* / repositionCenteredImage（）;}）;
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
顯示圖像的HTML頁面如下所示：
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
附加到元素的CSS如下所示：
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
您可以從我們公司主頁的以下網址下載整個解決方案：
解決方案4
0 2016-10-07 07:31:45
該解決方案適用於所有尺寸的圖像。在此， 圖像的比例也得以保持。
.client_logo{ height:200px; width:200px; background:#f4f4f4; } .display-table{ display: table; height: 100%; width: 100%; text-align: center; } .display-cell{ display: table-cell; vertical-align: middle; } .logo-img{ width: auto !important; height: auto; max-width: 100%; max-height: 100%; }
<div class="client_logo"> <div class="display-table"> <div class="display-cell"> <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg"> </div> </div> </div>
你可以設置大小
.client_logo
符合您的要求
解決方案5
0 2019-05-08 09:23:52
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
解決方案6
-1 2012-04-24 10:27:27
嘗試這樣的事情：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
解決方案7
-1 2012-04-24 10:31:32
使用margin-top
示例css
#id_immagine{
margin:0 auto;
}
如何在div內水平和垂直居中放置圖像和文本？
[英]How can I center an image and text horizontally and vertically inside a div?
如何在較小的 div 內制作圖像中心（垂直和水平）
[英]How to make an image center (vertically & horizontally) inside a smaller div
如何將圖片放在div的頂部（水平居中，垂直居中，居中）
[英]How to put an image on top of a div (center horizontally but top vertically, in the middle)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.