风格

Question

我目前使用以下方式水平和垂直居中图像

.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上调整顶部/底部，但没有任何运气。有人可以给我一些关于如何解决这个问题的建议吗？

Answer 1

我认为您需要以下内容：

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.希望它有所帮助。

Answer 2

只需添加div标签并使用一些样式示例

<body>
 <div>
 <p><img src="sample.png" alt="test"></p>
 </div>
</body>

风格

div{display: inline-table;text-align: center}
div p{display: table-cell;vertical-align: middle;}

并使用padding-top：{header height应放在这里} px

例如，如果标题高度为50px;

div{padding-top: 50px}

在网站标题和窗口底部之间垂直居中

2 个答案:

风格