如何将一个盒子的内容与中心对齐

在下面的代码中，我试图将所有标题垂直对齐在中间，但它不适用于垂直对齐，如您在我的jsfiddle中所看到的：https://jsfiddle.net/Wosley_Alarico/exp1zjh6/1/如何将一个盒子的内容与中心对齐

HTML：

<div class="captions"> 
    <h2>design</h2> 
    <h1>create</h1> 
    <h2>print</h2> 
</div>

CSS：

.captions { 
    display:flex; 
    vertical-align:middle; 
} 
h1{ 
    font-size:28pt; 
}

我怎样才能把H1与H2的的中间？

有了'flex'你'对齐，items'属性：'对齐项：中心;' – blonfu

.captions { 
    display:flex; 
    align-items: center; 
justify-content:center; 
}

2016-07-15 10:44:15

嘛。它将h1进一步向上移动。但我真正想要的是将h1进一步提升。像 - h1 - 。想象一下，破折号是h2。所以你可以看到h1在h2中间。 –

尽管此代码可能有助于解决问题，但提供了关于_why_和/或_how_的其他上下文，回答此问题将显着提高其长期价值。请[编辑]你的答案，添加一些的解释。 –

添加到.captions

.captions { 
    display: flex; 
    vertical-align: middle; 
    align-items: center; 
}

2016-07-15 10:44:37

回答