垂直居中對齊div高度未知

Question

我正在嘗試解決涉及浮動div的vertical-align問題。 所有高度都是未知的-因為它們僅由內部文本行隱式形成。

這是代碼： https : //jsfiddle.net/zjzyryae/

 #test { background: yellow; display: inline-block; } #block1 { float: left; display: inline-block; background-color: grey; } #block2 { background-color: green; float: left; } 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> <div id="block2"> sample </div> </div> 

我需要將“ block2” div垂直居中-當然，僅使用CSS（沒有JavaScript）。

看到“ block1” div隱式設置了父“ test”塊的高度-這與所描述的類似情況（在此高度以像素為單位明確設置）中存在主要區別。

也許這個問題在某個地方解決了，但我沒有找到完全相同的情況。 我考慮的類似示例是不同的。

這個垂直居中顯示未知高度div中未知高度文本的內容實際上包括硬編碼的高度設置-與我的情況大不相同。

那一個如何垂直對齊未知高度的浮動元素？ 也是不同的情況，不適合我的情況-因為父級高度等於浮動divs高度（比我的情況容易得多）。

我嘗試使用其他display:table設置-但還是沒有運氣。

Answer 1

我建議將flexbox與display: inline-flex完美配合使用，因此它具有“縮小以適應”功能，就像其他內聯級別元素一樣。 並align-items: center使所有彈性項目都對齊到中間。

 #test { background: yellow; display: inline-flex; align-items: center; } #block1 { background-color: grey; } #block2 { background-color: green; } 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> <div id="block2"> sample </div> </div> 

如果確實需要支持較舊的瀏覽器，則仍然可以使用內聯代碼塊（無浮動），關鍵是設置vertical-align: middle ，並在需要時刪除不需要的空白 。

 #test { font-size: 0; /*remove white space*/ background: yellow; display: inline-block; } #block1, #block2 { font-size: 16px; /*reset font size*/ display: inline-block; vertical-align: middle; } #block1 { background-color: grey; } #block2 { background-color: green; } 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> <div id="block2"> sample </div> </div> 

或使用CSS表，再次設置vertical-align: middle ，但它與內聯塊的工作方式不同，它將內容或元素垂直居中居中，而不是元素本身或同級居中。 我為背景色添加了<span>標簽。

 #test { background: yellow; display: inline-table; vertical-align: middle; } #block1, #block2 { display: table-cell; vertical-align: middle; } #block1 { background-color: grey; } /* #block2 { background-color: green; } */ 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> <div id="block2"> <span style="background:green;">sample</span> </div> </div> 

Answer 2

如果您不想使用flex ， 請不要使用float ，而要單獨使用 inline-block和vertical-align ：

  #test { background: yellow; display: inline-block; } #block1 { display: inline-block; background-color: grey; vertical-align:middle; } #block2 { display: inline-block; background-color: green; vertical-align:middle; } 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div><!-- --><div id="block2"> sample </div> </div> 

https://jsfiddle.net/zjzyryae/1/

Answer 3

您可以使用flexbox

#test {
        background: yellow;
        display: flex;
        align-items: center;
    }

Answer 4

您為什么不對它們全部使用display flex？ 這是一個新技巧，值得一試。 從一開始就使用flex並更改CSS代碼的類型。

這就是我能給你的一切。

  div#test { background: yellow; display: flex; flex-direction:row; } div#block1, div#block2{ display:flex; flex-direction:column;} div#block1 { background-color: grey; } div#block2 { background-color: yellow; align-items:center; justify-content:center } div#inside-block2{ background-color:green; } 

 <div id="test"> <div id="block1"> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> <div>test</div> </div> <div id="block2"> <div id="inside-block2"> sample </div> </div> </div> 

所以我所做的是，用子block1和block2進行了一個名為test的包裝，而block2 id有一個孩子，您可以將它放置或替換到任何地方。 您可以在此處了解有關flex的更多信息

有關我的一些代碼提示。 使用div#id在CSS中調用ID名稱，我相信在某些瀏覽器中，如果僅使用此#id調用它們，則可能會有點跳動。

希望它能對您有所幫助。