Question

我有一个dojo titlepane，左侧有一个按钮，右侧有一段文字。我希望能够垂直居中对齐关于文本段落的按钮，并希望避免使用表格。我需要一个可以在IE7 +中运行的解决方案。无论它值多少，我都在使用Dojo 1.3.2（是的......我知道它已经老了）。标题窗格最初关闭，直到用户决定打开它。

以下是标题窗格内容的示例：

<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>

首先：

您必须使用div inte p div包裹input，以便知道它有多高。
添加此包装器display: table样式。
添加一个额外的元素来包裹input，此元素必须包含CSS float: left; width: somepx和display:table-ceill。
请务必使用width: somepx（您的文字）向div提供p。
尝试使用CSS类而不是内联样式。

PS 总是记得把jsfiddle：http://jsfiddle.net/jnCU4/

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

1 个答案: