再一次,我无法让图像在特定的 div 中居中。我遇到的答案只是水平居中,而不是垂直居中
#wrap {
width: auto;
margin: 0 auto;
overflow: hidden;
float: left;
}
/*header info if needed
#headerBlock {
height: 200px;
background: #776b68;
display: flex;
align-items: center;
}
div.headerText {
display: inline-block;
padding-right: 90px;
}
div.headerImg {
display: inline-block;
}
*/
#leftBlock {
width: 50%;
height: 500px;
background: #000;
float: left;
}
#leftBlock img {
display: block;
margin: auto;
transition: transform 4s;
}
#leftBlock img:hover {
transform: scale(1.8);
}
#rightBlock {
width: 50%;
height: 500px;
background: #8ab78f;
float: left;
}
#rightBlock img {
display: block;
margin: auto;
}
/*ignore footer*/
#footerBlock {
height: 200px;
background: #29342a ;
clear: left;
}
<div id="wrap">
<div id="headerBlock">
<div class="headerText">blah blah blah so neat</div>
<div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
</div>
</div>
<div id="leftBlock">
<img src="/leftside.jpg" height="250" width="250">
</div>
<div id="rightBlock"></div>
<img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>
</div>
我遇到的问题是,它只喜欢水平居中。我找到的唯一解决方案是在下面执行以下操作,但真正要做的是将它移到整个屏幕上,我必须指出它的去向(应该在 leftBlock div.. 内):
#leftBlock img {
position: absolute;
top: 50%;
margin-top: 305px;
left: 50%;
margin-left: -450px;
transition: transform 4s;
}
最佳答案
如果我理解最终目标,您想将 position: relative
添加到父级,删除图像上的边距并使用 transform: translate(-50%,-50% )
结合 top: 50%;左:50%
使图像相对于父级居中。
#wrap {
width: auto;
margin: 0 auto;
overflow: hidden;
float: left;
}
/*header info if needed
#headerBlock {
height: 200px;
background: #776b68;
display: flex;
align-items: center;
}
div.headerText {
display: inline-block;
padding-right: 90px;
}
div.headerImg {
display: inline-block;
}
*/
#leftBlock {
width: 50%;
height: 500px;
background: #000;
float: left;
}
#leftBlock img {
display: block;
margin: auto;
transition: transform 4s;
}
#leftBlock img:hover {
transform: translate(-50%,-50%) scale(1.8);
}
#rightBlock {
width: 50%;
height: 500px;
background: #8ab78f;
float: left;
}
#rightBlock img {
display: block;
margin: auto;
}
/*ignore footer*/
#footerBlock {
height: 200px;
background: #29342a;
clear: left;
}
#leftBlock {
position: relative;
}
#leftBlock img {
position: absolute;
top: 50%;
left: 50%;
transition: transform 4s;
transform: translate(-50%, -50%);
}
<div id="wrap">
<div id="headerBlock">
<div class="headerText">blah blah blah so neat</div>
<div class="headerImg"><img src="/yupyup.jpg" height="70" width="70">
</div>
</div>
<div id="leftBlock">
<img src="/leftside.jpg" height="250" width="250">
</div>
<div id="rightBlock"></div>
<img src="/rightside.jpg" height="250" width="250">
<div id="footerBlock"></div>
</div>
关于html - 无法让图片在div中垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44376024/