我已经在我的网页下面的标记代码：如何在一个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