將標題垂直和水平居中放置在圖像下方

Question

我在正在構建的網站上創建了以下jsfiddle 。

第一個標題有3行，而其他2個標題只有一行。 我在盒子里增加了min-height ，所以它們都相等。

我現在想將標題定為垂直軸和水平軸的中心。

我試圖用flexbox實現這一點，但是它只是水平對齊。 我在這里做錯了什么？

 .container { width: 600px; max-width: 90%; margin: 0 auto; } .third { float: left; width: 32%; min-height: 227px; margin: 0 2% 2% 0; background: #fff; } .last { margin: 0 0 2% 0; } header { padding: 12px; } h2 { margin: 0; display: flex; align-items: center; justify-content: center; } img { display: block; height: auto; max-width: 100%; } 

 <div class="container"> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title one which is slightly longer goes here</h2> </header> </section> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title two</h2> </header> </section> <section class="third last"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title three</h2> </header> </section> </div> 

更新：

我正在尋找一種支持IE的解決方案，包括9。

Answer 1

我建議使用嵌套的flexbox，將float和min-height放到section 。 Flex布局足夠智能，可以自動獲得相等的高度。 要獲得IE9支持，請參閱底部。

 .container { width: 600px; max-width: 90%; margin: 0 auto; display: flex; } .third { /* float: left; */ width: 32%; /* min-height: 227px; */ margin: 0 2% 2% 0; background: gold; display: flex; flex-direction: column; } .last { margin: 0 0 2% 0; } header { padding: 12px; flex: 1; display: flex; align-items: center; justify-content: center; } h2 { margin: 0; } img { display: block; height: auto; max-width: 100%; } 

 <div class="container"> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title one which is slightly longer goes here</h2> </header> </section> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title two</h2> </header> </section> <section class="third last"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title three</h2> </header> </section> </div> 

編輯：IE9支持。 我將使用一些Javascript做等高的東西，以下示例使用jQuery + CSS表格單元做垂直居中。

 $(document).ready(function() { var maxHeight = 0; $("h2").each(function() { if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); $("h2").height(maxHeight); }); 

 .container { width: 600px; max-width: 90%; margin: 0 auto; } .third { float: left; width: 32%; /* min-height: 227px; */ margin: 0 2% 2% 0; background: gold; } .last { margin: 0 0 2% 0; } header { padding: 12px; } h2 { margin: 0; display: table-cell; vertical-align: middle; } img { display: block; height: auto; max-width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title one which is slightly longer goes here</h2> </header> </section> <section class="third"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title two</h2> </header> </section> <section class="third last"> <img src="http://bit.ly/1OTNPkt" alt="Kitten"> <header> <h2>Title three</h2> </header> </section> </div> 

Answer 2

嘗試使用display: table及其類似的方法，但事實證明您不能將百分比用於border-spacing

演示： https : //jsfiddle.net/2dkycc1L/

Answer 3

我使用flexbox制作了整個網格，使它們的高度相等，並刪除了最小高度。 header元素還可以靈活調整以使標題在中間垂直對齊： https : //jsfiddle.net/5yq37fha/ 。