javascript - 如何在封闭的 Dojo Titlepane 中垂直居中内容？

Question

我有一个 dojo titlepane，它在左侧包含一个按钮，在右侧包含一段文本。我希望能够将有关文本段落的按钮垂直居中对齐，并希望避免使用表格。我需要一个适用于 IE7+ 的解决方案。不管它值多少钱，我都在使用 Dojo 1.3.2(是的……我知道它很旧)。标题 Pane 最初是关闭的，直到用户决定打开它。

这是标题 Pane 内容的示例:

<div>
    <div style="float: left; margin-bottom: 5px; margin-right: 5px;">
        <input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt" />
    </div>
    <div style="float: right; margin-right: 5px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
    </div>
</div>

还值得一提的是，我不知道容器的高度，因为我知道有一些解决方案可以将容器高度硬编码在 css 中。

Answer 1

我的解决方案有效，但仅适用于 IE8+(也许我的 ieTester 有误，所以您应该检查一下)。您将不得不稍微修改您的 HTML:

<div>
    <div style="margin-bottom: 5px; margin-right: 5px; display: table; ">
    <p style="display: table-cell; vertical-align: middle; width: 50px;">
            <input type="submit" name="access" id="access" value="Access" STYLE="font-size:8pt ;" />
        </p>

        <div style="float: right; margin-right: 5px; width: 300px;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat vulputate tortor, sit amet malesuada quam vulputate vel. In hac habitasse platea dictumst. Vivamus ut rutrum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent rhoncus nisi vitae augue tincidunt elementum. Phasellus a lorem dolor. Aliquam erat felis, ultrices eget lacinia non, rutrum a massa. Mauris et est dui, ut rutrum orci. Curabitur pulvinar porta risus, ac lobortis lorem volutpat ut. Etiam fringilla hendrerit diam at faucibus. Donec condimentum lacinia sem, quis aliquet mauris tincidunt nec. Ut sit amet urna lectus, vel volutpat ipsum. Aliquam erat volutpat. Proin id orci sit amet turpis sagittis adipiscing nec nec enim. Maecenas vulputate, velit a commodo ultricies, nisl nisl tristique lorem, ut lacinia mauris felis eget velit. Vestibulum sit amet dictum tellus.</p>
        </div>
    </div><!-- display: table; end -->
</div>

所以首先:

1. 你必须用包含 input 的 p inteo div 包装 div 以便它知道有多高是的。

2. 添加此包装器 display: table 样式。

3. 放一个额外的元素来包裹input，这个元素必须有那些CSS float: left;宽度:somepx 和 display:table-ceill。

4. 请记住将 width: somepx 赋予 div 和 p(您的文本)。

5. 尝试使用 CSS 类而不是内联样式。

附言永远记得把 jsfiddle: http://jsfiddle.net/jnCU4/