垂直和水平居中图像下方的标题

我在我正在构建的网站上创建了以下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