在兩列布局垂直對齊按鈕

我試圖得到一個兩列布局，其中左列有一個按鈕（垂直居中），右列是純文本。在兩列布局垂直對齊按鈕

我已經能夠得到兩列的佈局工作，但我不能得到按鈕居中（最大的文字是動態的，它可以增長和縮小，所以左列需要是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>

和我的理解應該是工作，但似乎並沒有要。關於如何讓這個工作的任何建議？

來源

2013-04-05 Kyle

我想出瞭解決方案，把你的內容分成div與position: relative，使buttonposition: absolute與top: 50% 。那是你想要達到的目標嗎？
FIDDLE EXAMPLE

來源

2013-04-05 18:06:05

是的，如果你知道的'button'你可以做'邊距高度： - 5px'或任何一半的高度，這將完美對齊。 – 2013-04-05 18:08:40

這與@JakeZeitz對'margin-top'的建議結合起來就像一個魅力！ – Kyle 2013-04-05 18:47:56

你應該做的容器顯示：表，並從按鍵上移開浮動：

<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-05 18:05:07

<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或進行修復高度父顯示錶股利或子顯示錶格單元格，這樣的 - http://jsfiddle.net/CjT2G/

來源

2013-04-05 18:41:02 HADI

在兩列布局垂直對齊按鈕

回答

相關問題