我有以下的div元素。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何将图像对齐以位于div的中间和中心位置?
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何将图像对齐以位于div的中间和中心位置?
HTML:
<div id="over">
<img src="img.png">
</div>
CSS:
#over {
text-align: center;
}
#over img {
vertical-align: middle;
}
要实现水平居中,只需添加以下CSS样式:
#over img {
display: block;
margin: 0 auto;
clear:both;
}
另一种方法:
#over img {
display: inline-block;
text-align: center;
}
要使内容垂直居中,只需添加以下代码:
#over img {
vertical-align: middle;
}
这对我起了作用。
<div class="CenterImage">
<asp:Image ID="BrandImage" runat="server" />
</div>
注意:在这种情况下,不要为“BrandImage”关联CSS类
CSS:
.CenterImage {
position:absolute;
width:100%;
height:100%
}
.CenterImage img {
margin: 0 auto;
display: block;
}
#image-id {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: auto;
margin: 0 auto;
}
<div>
<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
</div>
很多答案建议使用margin:0 auto
,但这仅适用于您要居中的元素没有向左或向右浮动,也就是说没有设置float
css属性。为了实现这一点,将display
属性应用于table-cell
,然后将左右边距应用于自动,因此您的样式看起来像这样:style="display:table-cell;margin:0 auto;"
大多数解决方案都不起作用,因为高度为100%的div并不意味着完整的浏览器高度。
使用height: 100vh;可以解决问题。
<style type="text/css">
body {
margin: 0;
}
#over {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
</style>
<div id="over">
<img src="test.png" alt="test" width="600">
</div>
#over {
display: grid;
height: 100vh;
place-content: center;
}
place-content: center
是以下的简写形式:
.element {
align-content: center;
justify-content: center;
}
<div id="over">
<img src="img.png">
</div>
height: 100vh
规则,但请随意根据您的需要进行更改。div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
不将图像缩放到中心(图像不填充div):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style>
<!--[endif]-->
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>