Question

我正在尝试垂直对齐div（此示例中的“p”元素，但它可能是div，链接，图像等）需要将其position属性设置为absolute。我按照这个例子：http://davidwalsh.name/table-cell-position-absolute

但我可以让它发挥作用。这是代码：

<div style="width: 400px; height: 48px; background-color: #EEE; margin: 0 auto;">
    <div style="display: table; position: relative; border: 1px solid blue; width: 100%; height: 100%;">
        <div style="display: table-cell; border: 2px solid green;">
            <div style="position:relative; overflow: auto; height: 100%;">
                <p style="position:absolute; bottom:0; right:0; font-size: 18px; color: black; border: 1px solid orange;">VERTICALLY CENTER ME PLEASE!</p>
            </div>
        </div>
    </div>
</div>

和jsfiddle：http://jsfiddle.net/bqm7wudc/2/

请问有人建议解决方案吗？

Answer 1

我实际上是这样解决问题的方法：

<div style="display: table; position: relative; border: 1px solid red; width: 960; height: 48px; margin: 0 auto;">
        <ul style="display: table; vertical-align: middle; border: 1px solid orange; padding: 0px; position:absolute; left: 700px; margin: 0; height: 100%;"> 
            <li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;"><a href="#">toto</a></li>
            <li style="display: table-cell; vertical-align: middle; font-size: 20px; font-weight: 900; padding-right: 20px;"><a href="#">titi</a></li>
        </ul>
</div>

文本被定义为列表的内容。 ul元素本身就是一个表（使用绝对模式定位），而li元素是表格单元格。这似乎有效。

更新了小提琴：http://jsfiddle.net/bqm7wudc/7/

垂直对齐Div与绝对位置

1 个答案: