Question

这是我的标记：

<div id="container">
    <img id="image" src="image.jpg" />
    <div id="contents">Contents</div>
</div>

#container的高度等于#image的高度。所有高度都是动态的（它们会在窗口调整大小时更改）。无法通过背景属性设置图像。

如何在图片上放置内容并在#container中垂直居中？

Answer 1

这应该做你想要的。我刚刚在css中设置了容器和图像的高度，但如果它们在html中使用相同的设置或使用javascript，则结果应该相同。为了清晰起见，背景颜色就在那里。

#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}

编辑：这是使用旧的经典边缘自动技巧的解决方案的小提琴。唯一可能导致问题的是父母需要的位置：固定;这可能会在其他地方引起问题。最重要的是它有效，并且没有使用像素设置高度。

link

这是来自小提琴的代码，用于没有固定高度的纯css解决方案。

<div id="container">
    <img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
    <div id="contents">Contents</div>
</div>

#container {
    position: fixed;
}
#contents{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 10%;
    margin: auto;
}

Answer 2

#contents的高度是否已知？在这种情况下，应该这样做（jsfiddle demo）：

#container{
    position:relative;

    /* For demo only */
    height:500px;
    border: 5px solid red;
}
#image{ 
    position:absolute;

    /* For demo only */ 
    height:500px; 
}

#contents{
    position: absolute;
    top:50%;

    height:100px;
    margin-top: -50px; /* Half of #contents height */   

    /* For demo only */ 
    background-color: blue;
}

Answer 3

如果您知道#contents的高度，则可以设置

#container{position:relative;}
#contents{
    position:absolute;
    top:50%; /*50% of parent*/
    margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}

你说你不知道#contents的高度。

另一个选项是将显示：设置为table-cell并使用vertical-align: middle

#container{
    display: table-cell;
    vertical-align: middle;
}

但是，根据您要支持的浏览器，这可能会导致显示问题。

更可靠的解决方法是将第一个选项与一些jquery或javascript结合起来找到元素的高度并设置其margin-top：

content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';

http://jsfiddle.net/h76sy/

编辑：抱歉，我的javascript中有错误，请立即尝试

在CSS中垂直对齐，没有高度已知

3 个答案: