垂直和水平居中圖像下方的標題

我在我正在構建的網站上創建了以下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

來源

2016-01-09 Squideyes

我建議使用嵌套的flexbox，在section上放下float和min-height。 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>

來源

2016-01-09 17:15:40 Stickers

優秀的解決方案，但我需要支持包括9的IE。還有其他解決方案嗎？ – Squideyes

你打開jQuery解決方案嗎？ – Stickers

如果可能，我寧願純粹使用HTML和CSS。如果在HTML中很麻煩，我會對JQuery開放。 – Squideyes