我已經在我的網頁下面的標記代碼：如何在一個div水平和中央圖像垂直
<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>
而且如我所料不出現，它看起來就像是：
，但我想得到這樣的結果：
如何將圖像水平和垂直居中？
這裏是一個tutorial如何垂直居中的圖像和水平地在一個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>對於垂直對齊，我會包含一些CSS以將其從頂部50％放置，然後將其向上移動一半像素高度的圖像。
水平，我會使用保證金，建議。
所以，如果你的圖像是100x100px，你最終會得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
嘗試這樣：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
圖片和文字對齊不同的只是把它應用到了''而不是做爲所包裹你的'' –
Murtaza
2012-04-24 10:37:00
使用邊距
例如CSS
#id_immagine{
margin:0 auto;
}
有你需要解決兩個方面。第一個方面是水平對齊。這可以通過邊距很容易實現：自動應用於圖像本身周圍的div元素。 DIV需要將寬度和高度設置爲圖像大小（否則這將不起作用）。要實現垂直中心對齊，您需要在HTML中添加一些JavaScript。這是因爲在頁面啓動時不知道HTML高度大小，並且稍後可能會更改。最好的解決方案是使用jQuery並編寫以下腳本： $（window）。ready（function（）{/ *偵聽窗口就緒事件 - 在頁面加載後觸發*/ 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;
}
您可以從我們公司下載的整體解決方案主頁在以下網址：
該解決方案是對所有大小的圖像 在此的圖像也被保持的配給。
.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
大小accourding您的要求
爲什麼要使用4個標籤，而不是2？![]()
應該可以工作。 –
Vivien
2012-04-24 10:39:04
我看到圖像底部的div，X rapresent的東西或我必須設置它的一些值？ – CeccoCQ 2012-04-24 10:42:41
X對你來說可能是很好的：「5％」，「10px，0」......你也可以在底部圖像上加上「背景圖像」和「背景位置」 – Vivien 2012-04-24 10:44:30