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

我有一个dojo titlepane，它包含左侧的一个按钮和右侧的一段文本。我希望能够垂直居中对齐文本段落中的按钮，并且希望避免使用表格。我需要一个可以在IE7 +中工作的解决方案。无论它值多少钱，我都使用Dojo 1.3.2（是的......我知道这很旧）。标题栏最初是关闭的，直到用户决定打开它。如何在封闭的Dojo Titlepane中垂直居中放置内容？

这里的titlepane内容的例子：

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

来源

2013-02-25 Scott

护理做出jsfiddle.net例子吗？ – 2013-02-25 22:01:15

对不起，我没有提供。如果我有一些额外的空闲时间，我会这样做。在我最初的尝试中，我在获得Dojo方面遇到了问题，并且无法合作。另外，我想知道jsfiddle支持哪些版本的IE。我试过用IE8，它似乎没有正确显示。 – Scott 2013-02-26 17:05:51

@Scott - 你对jsfiddle和IE是正确的，但是当你使用jsfiddle时，复制你的代码并做一些测试文件比较容易。 – bumerang 2013-02-26 19:13:09

我的解决方案工作，但只在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>

所以首先：

您有p包装div inteo含input所以它知道它是多么HIGHT div。
添加此包装display: table风格。
把包裹input一个额外的元素，这个元素必须有那些CSSfloat: left; width: somepx和display:table-ceill。
请记得给width: somepx加div加上p（您的文字）。使用CSS类而不是内联样式。

PS 百达记得放的jsfiddle：http://jsfiddle.net/jnCU4/

来源

2013-02-26 08:48:20 bumerang

@Default - 感谢您的编辑 – bumerang 2013-02-26 14:51:08

感谢您的努力。看来[IE7不支持display：table]（http://www.w3schools.com/cssref/pr_class_display.asp）。但是，当我的客户逐步淘汰IE7支持时，我可能最终会走这条路。 – Scott 2013-02-26 17:09:01

@Scott - 你可以使用这个链接说服他：http://www.w3schools.com/browsers/browsers_explorer.asp在我们公司，我们不支持IE7。 – bumerang 2013-02-26 19:08:25

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

回答

相关问题