带有标题的垂直居中列答案

【问题标题】：vertical centered columns with headings flexbox带有标题的垂直居中列
【发布时间】：2016-04-15 01:16:56
【问题描述】：

我设法使列内容与 flexbox 垂直对齐。但是，我还需要列的标题。

我怎样才能有标题，其中文本以列的宽度居中并且位于列的顶部（内容必须保持垂直居中）

查看我的 codepen 尝试： http://codepen.io/anon/pen/QNmrNx

.tothetop{
      position: absolute;
      top:0;
      text-align:center;
      background: yellow;  
    }

将标题放在顶部，但宽度与列宽不匹配，因此我无法将文本居中

【问题讨论】：

那么，您想让.wp:first-child 顶部对齐吗？
@Paul 要么，要么有一个额外的标题行，其中列的宽度与内容行中的宽度相同
这样的？ codepen.io/anon/pen/ONvoGw
@Paul 完美！ flexbox 对我来说仍然是新的，但它太棒了！ :)
实际上，您完成了所有 flexbox 的工作，您的最终目标无法通过简单的 flexbox 设置实现。我刚刚添加了一个类和定位。

标签： html css flexbox

【解决方案1】：

如果我理解正确，您希望标题文本相对于列水平居中。这可能会对你有所帮助 -

header {
    display: flex;
    justify-content: center;
    width: 500px;
    margin: auto;
}     
.myView {
            margin: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            height: 500px;
            width: 500px;
        }

        .wpType {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: column;
           flex-direction: column;
           -webkit-align-items: center;
           align-items: center;
           -webkit-justify-content: center;
           justify-content: center;
            padding: 0;
            margin: 0;
            list-style: none;
            border: 1px solid silver;
        }

        .wpType:nth-child(even){
            background: blue;
        }
        .wpType:nth-child(odd){
            background: red;
        }

        .wp{
            flex: 0 1 auto;
            padding: 5px;
            width: 100px;
            height: 100px;
            margin: 10px;
            background: white;
            line-height: 100px;
            color: white;
            font-weight: bold;
            font-size: 2em;
            text-align: center;
        }

<header>header</header>
<div class="myView">
    <div class="wpType">
        <div class="wp"></div>

    </div>
    <div class="wpType">
        <div class="wp"></div>
        <div class="wp"></div>
        <div class="wp"></div>
    </div>
    <div class="wpType">
        <div class="wp"></div>
        <div class="wp"></div>
        <div class="wp"></div>
    </div>
    <div class="wpType"><div class="wp"></div>
        <div class="wp"></div></div>
    <div class="wpType"><div class="wp"></div></div>

</div>

【讨论】：