我怎樣才能使左流動的立柱和浮動的右立柱垂直居中？

Question

在我的項目中，有兩列。 左側包含的圖像最大為左側列寬度的100％，並且具有自動高度。 右側的寬度變化，而左側的寬度則填充剩余空間。 這使用了JackJoe對上一個問題的答案中描述的技術。

我現在想做的是將列的垂直居中位置並減小高度。 有時右欄或左欄較短，具體取決於窗口的寬度。 我嘗試使用

{
  position: relative;
  top: 50%;
  transform: translateY(-50%); //with more prefixes
}

但是，出於某種原因， top: 50%部分根本無法工作。 這是我當前的代碼， 沒有垂直居中嘗試（這按預期工作）：

 $(document).ready(function() { $("#right").click(function() { $(this).toggleClass("wide"); }); }); 

 #container { width: 100%; border: 1px solid red; height: auto; overflow: hidden; } #right { float: right; border: 1px solid green; width: 100px; transition: 1s width; } #left { border: 1px solid green; width: auto; overflow: hidden; } #left img { max-width: 100%; height: auto; } #right.wide { width: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div id="right"> Click Me </div> <div id="left"> <img src="http://placehold.it/440x120"/> </div> </div> 

編輯：我忘了指定-右列的寬度需要取決於其內容的寬度，就像沒有設置寬度的內聯塊元素元素的寬度一樣。 我只是在演示中使用了精確的寬度來顯示列的流動性。

Answer 1

您可以使用CSS表獲得所需的結果。 將display: table-cell應用於左右元素， vertical-align: middle將內容vertical-align: middle至垂直居中。

這是一種非常健壯的方法，可在大多數現代瀏覽器中使用。

主要優點是您不需要任何JavaScript / jQuery即可調整布局。

更新：如果您的可選元素在右側顯示/隱藏，則垂直居中仍然有效。

 $(document).ready(function() { $("#right").click(function() { $(this).toggleClass("wide"); }); }); 

 #container { width: 100%; border: 1px solid red; height: auto; display: table; } #right { display: table-cell; vertical-align: middle; border: 1px solid green; width: 200px; transition: 1s width; } #left { display: table-cell; vertical-align: middle; border: 1px solid green; width: auto; } #left img { width: 100%; height: auto; display: block; } #right.wide { width: 300px; } #right p.extra { display: none; } #right.wide p.extra { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="left"> <img src="http://placehold.it/440x120" /> </div> <div id="right"><p><b>Click Me</b></p> <p class="extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p> </div> </div> 

Answer 2

您可以使用display：table-cell來實現垂直對齊。 但是，這使用了不同的HTML（和CSS）。

#container {
 width: 100%;
 border: 1px solid red;
 height: auto;
 overflow: hidden;
    display: table
}

#right {
 border: 1px solid green;
 width: 100px;
 transition: 1s width;
    display: table-cell;
    vertical-align: middle;
}

#left {
 border: 1px solid green;
 width: auto;
 overflow: hidden;
    display: table-cell;
}

這是一個小提琴： http : //jsfiddle.net/woj3s8La/