大小不等的 Div 无法相对于顶部居中

Question

所以我有两个 div 元素，其中一个比另一个小。我 "centered" 他们用包装器 class 和 "width: 80%; margin: 0 auto; text-align: center;" 以及他们每个 dividual classes 和 "width: 30%; display: inline-block;"。它们居中；但是，其中一个比另一个低，因此如果有意义的话，它不会相对于第一个 div 居中。

.wrapperPost{
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.sidePost{  
    width: 30%;
    display: inline-block;
}

<div class="wrapperPost">
    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta, lectus sapien porttitor nequeeget 
        luctus nunc tortor pharetra lectus. Nunc eget sem et elit vestibulum 
        pharetra.
        </p>
    </div>

    <div class="sidePost">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        bibendum, urna ac convallis porta</p>
    </div>
</div>

截至目前，唯一的错误是第二个 div 元素低于其左侧的元素。我希望他们排在最前面。

编辑：这是一个 JSFiddle https://jsfiddle.net/JohnstonLiu/75wystL9/

Answer 1

您只需将 vertical-align: top 添加到 sidePost class。或者使用像 Flexbox 这样的现代 CSS 布局来构建。 See example here

大小不等的 Div 无法相对于顶部居中

Divs of Unequal Sizes are Unable to Center Relative to Top

html

css

margin

display

text-align