我的页面中有以下标记代码：
<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>
它并没有像我预期的那样出现，它看起来像这样：
但我想得到这个结果：
如何使该图像水平和垂直居中？
这是一个关于如何在 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% 定位，然后将其向上移动图像像素高度的一半。
水平，我会按照建议使用边距。
因此，如果您的图像是 100x100 像素，那么您最终会得到。
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
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%;
}
您需要解决两个方面的问题。第一个方面是水平对齐。这很容易通过 margin: 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
根据您的要求
尝试这样的事情：
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
使用边距顶部
示例 CSS
#id_immagine{
margin:0 auto;
}