我正在尝试获得两列布局，其中左列有一个按钮（垂直居中），右列只是文本。
我已经能够使两列布局工作，但我无法使按钮居中（最大的文本是动态的。它可以增长和缩小，因此左列需要为height: 100%）。< / p>
这就是我到目前为止所提出的：
<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>
并且我的理解应该是有效的，但似乎不是。关于如何让它发挥作用的任何建议？
答案 0 :(得分：2)
我想出了一个解决方案，将您的内容放入div position: relative button，position: absolute top: 50% {{1}}。那是你想要实现的吗？
FIDDLE EXAMPLE
答案 1 :(得分：0)
你应该让容器显示：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>
答案 2 :(得分：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/