0

我正在尝试获得两列布局，其中左列有一个按钮（垂直居中），右列只是文本。

我已经能够使两列布局正常工作，但我无法使按钮居中（最大的文本是动态的。它可以增长和缩小，所以左列需要height: 100%）。

这就是我到目前为止想出的：

<body>
<div>
<div style="float: left; width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
    <button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.

Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.

Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.

Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.

Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.</div>
</div>
</body>

据我了解，应该可以工作，但似乎没有。关于如何让它发挥作用的任何建议？

4

3 回答 3

2

我想出了将您的内容放入div并position: relative制作button position: absolute的解决方案top: 50%。那是你想要达到的吗？
小提琴示例

于 2013-04-05T18:06:05.807 回答
0

您应该使容器 display: table 并从按钮中删除浮动：

<div style="display: table;">
<div style="width: 10px; height: 100%; vertical-align: middle; display: table-cell;">
    <button type="button" style="display: block; vertical-align: middle;">Abc</button>
</div>
<div style="margin-left: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla magna, auctor a varius quis, convallis id est. Vestibulum rhoncus, diam ac malesuada commodo, ipsum justo blandit nulla, eu pretium felis metus vel erat. Donec lobortis arcu ac mauris aliquam ultrices. Nunc feugiat, nisl non pharetra tempus, nunc est cursus nibh, quis hendrerit nibh mauris et massa. Nunc justo quam, feugiat ac mattis ac, placerat sed sem. Sed ultrices orci at erat sodales malesuada. Aenean blandit blandit tellus sit amet imperdiet. Duis pellentesque augue quis lacus cursus at convallis dolor volutpat. Donec orci quam, rhoncus in tincidunt ornare, fringilla eget magna.

Nulla facilisi. Cras consectetur turpis id odio mattis sagittis. Aenean bibendum, ligula tempor luctus fringilla, magna neque malesuada ipsum, non tincidunt ipsum libero non ante. Mauris posuere ullamcorper lorem, et vulputate nibh mattis a. Mauris pretium ullamcorper convallis. Mauris quam est, sollicitudin ut pretium eu, mollis ut elit. Nulla vulputate sodales sagittis.

Suspendisse a porta orci. Sed velit purus, auctor quis tincidunt sed, tristique sed libero. Sed et est eget neque mattis lobortis. Mauris suscipit vestibulum gravida. Etiam lorem ligula, viverra eu iaculis vel, varius at libero. Nullam ante ligula, porta vel euismod ac, gravida ac massa. Pellentesque semper eros vitae sapien aliquam laoreet quis ut neque. Phasellus ac ullamcorper nibh. Praesent vitae tellus libero. Sed aliquet consectetur tempor. Nam porta ornare quam, sed viverra arcu congue eget. Nulla pharetra mi ac enim convallis vel mollis nunc iaculis.

Aenean cursus sodales nunc eu euismod. Mauris eget justo est, eget varius libero. Integer pretium ultricies tortor, ut pellentesque dolor bibendum sed. Praesent ullamcorper, est facilisis molestie ultricies, erat metus tristique enim, nec luctus quam felis et lacus. Donec ullamcorper nulla ac purus consequat aliquet. Praesent nec arcu eu orci feugiat ullamcorper sit amet ac augue. Nullam porta adipiscing felis, vel suscipit tortor bibendum vel. Cras tincidunt erat quis mi ornare ultricies.

Maecenas non ante elit, vel ullamcorper sem. Donec a lectus sit amet lectus lacinia fermentum. Quisque at feugiat lorem. Donec in ipsum lectus, in aliquet enim. Duis purus nisi, tempor vehicula faucibus eu, dapibus id nisl. Phasellus dignissim sodales ornare. Fusce vel libero non ipsum sagittis convallis. In hac habitasse platea dictumst. Fusce ultrices, lectus nec eleifend porttitor, risus sem tincidunt elit, eu hendrerit nibh tortor a dolor.
</div>

于 2013-04-05T18:05:07.157 回答
0 
<div style="display:table; width:100%; height:100%">

    <div style="display:table-cell; width:20%; height:100%; background:#ddd; vertical-align:middle; text-align:center">
         <button type="button">Abc</button>
    </div>

    <div style="display:table-cell; height:100%; padding-left:20px">
         Your content
    </div>

</div>

你只需要看看这个 -http://jsfiddle.net/qN53h/

这将解决您的问题。显示表格单元格存在高度 100%的问题。对于该修复，您可以尝试height:auto或为父显示表格 div 或子显示表格单元格 div 设置固定高度，如下所示 -http://jsfiddle.net/CjT2G/

于 2013-04-05T18:41:02.573 回答