0

我有一个道场标题窗格，其中包含左侧的按钮和右侧的一段文本。我希望能够使按钮相对于文本段落垂直居中对齐，并希望避免使用表格。我需要一个适用于 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 中是硬编码的。

4

1 回答 1

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. 你必须div用pinteo包装div，input这样它就知道它有多高。

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

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

  4. 记得给with （你width: somepx的文字）。divp

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

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

于 2013-02-26T08:48:20.803 回答