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

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>

检查小提琴。 希望能帮助到你。

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：{标题高度应放在此处} px

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

div{padding-top: 50px}

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

问题描述

2 个解决方案

解决方案1
0 2015-05-01 09:11:05

解决方案2
0 2015-05-01 09:12:29

样式

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

问题描述

2 个解决方案

解决方案1 0 2015-05-01 09:11:05

解决方案2 0 2015-05-01 09:12:29

样式

解决方案1
0 2015-05-01 09:11:05

解决方案2
0 2015-05-01 09:12:29