html - 在内联 block 中垂直对齐子项的最佳方法

Question

我试图在不使用以下方法之一的情况下垂直对齐青色 div 中的内容:

• 垂直对齐(因为它需要显示为表格并且会对父 div 填充等产生链式 react )

• 行高(因为有超过 1 行有 3 个实际跨度)

• 表格(由于垂直对齐等链式 react )

• 绝对定位(因为其他一些青色 div 的文本会比其他的多，这意味着一些行会比其他的多)

• 相等的顶部和底部填充(与 abs 定位相同的原因)

• Flexbox(我禁止使用它们，因为它们会产生严重的链式 react !)

青色 div 是一个内联 block 。实现这一目标的最佳方法是什么？我希望能够在 3 个跨度中的每一个之间设置填充，以便很好地将它们隔开。

注意:我已经更新了我的答案以包括 flex 定位但是在移动 View 中下面的第二个青色 div 没有居中对齐

.sections {
    background: #f2f2f2;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 100px 10%;
    box-sizing: border-box;
}
h1 {
    font-size: 62px;
    text-transform: uppercase;
    font-weight: 400;
}
p {
    font-size: 22px;
    font-weight: 300;
    padding-top: 10px;
}
.foster-cta {
    box-sizing: border-box;
    width: 250px;
    height: 200px;
    background: cyan;
    display: inline-block;
    border: 1px solid grey;
    margin-top: 30px;

/* adding display flex makes the 2nd cyan div below not aligned centrally on mobile view */
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
display: inline-flex;

}
.foster-top {
    display: block;
    font-size: 30px;
}
.foster-middle {
    display: block;
    text-transform: uppercase;
    font-size: 22px;
}
.foster-bottom {
    display: block;
    font-weight: 300;
    font-size: 16px;
}

    <section class="sections">
        <h1>header 1 tag</h1>
        <p>some random text to go here lorem ipsum sit semei geono wfnwoenfowe fwenfuowe ffe efnpi enfo wfeonwofun weofun weofnwe ofunwe foiej.</p>
        <div class="foster-cta">
            <span class="foster-top">icon</span>
            <span class="foster-middle">some random text here</span>
            <span class="foster-bottom">a load more random text goes here that will be more descriptive and longer.</span>
        </div><!--
        --><div class="foster-cta" style="margin-left:50px;">
            <span class="foster-top">icon</span>
            <span class="foster-middle">text</span>
            <span class="foster-bottom"> a load more random text goes here that will be more descriptive and longer a load more random text goes here that will be more descriptive and longer.</span>
        </div>
    </section>

Answer 1

在 CSS 中进行任何类型的对齐时，Flexbox 是您的最佳选择。代码也很简单:

.div-parent {

   display: flex;

}

.div-child {

   align-self: center;

}

这只会垂直居中对齐