如何將一個盒子的內容與中心對齊

在下面的代碼中，我試圖將所有標題垂直對齊在中間，但它不適用於垂直對齊，如您在我的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

回答