0

好的，所以这个问题已被多次询问和回答，但我仍然无法提供有效的解决方案。

我想垂直对齐到 DIV 中的中间任意元素。因此，上述问题中的链接教程说：

Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.

代码中的一个示例：

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>


除了与教程上的屏幕截图相反，这不起作用。我唯一改变的是在外部 DIV 周围添加一个边框，这样您就可以看到垂直对齐方式。

所有这一切都是产生一个零高度的 DIV，它呈现为一条直线。如果为外部 DIV 添加高度，则可以看到内部内容，但实际上并没有垂直对齐内容。那么，为什么这个例子不起作用呢？

4

2 回答 2

0

I believe your containing div also has to have a specified height. If you inspect the #myoutercontainer div with firebug you see that it actually has a height of 13em, which they don't show in the example code given.

于 2012-09-11T18:40:50.930 回答
0

这是基于这篇Chris Coyer 文章的不同方法。如果要将文本垂直居中到固定大小的 div，则可以像这样重复该过程。如果你想让它向右对齐，只需转动修改“text-align：center;” myoutercontainer 的样式。

于 2012-09-11T18:45:34.213 回答