我目前使用以下方法将图像水平和垂直居中:
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
html:
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
这一直工作正常，但我现在添加了一个标题:
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
如果我调整窗口大小或窗口未设置为理想大小，则此居中图像将与标题重叠。我真正想要的是它在标题底部和窗口底部之间垂直居中。我尝试在居中的 img 上调整顶部/底部，但没有任何运气。有人可以给我一些关于如何解决这个问题的建议吗？
最佳答案
我认为您需要如下内容:
body{
padding:0;
margin:0;
}
.centeredImage
{
text-align:center;
display:block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 55px;
bottom: 0;
margin: auto;
}
#header {
background: #e9e6e6; /* Here set your colour */
height: 55px;
width: 100%;
left: 0;
top:0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}<div id="header"></div>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>检查 Fiddle.希望对您有所帮助。
关于html - 在网站标题和窗口底部之间垂直居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29984165/