Html 显示文本在同一行中的几个块

我试图用图片和两个文本创建一些块/框-标题和潜文本，但标题有时有一个句子，但另一个更多，所以如果一个有一个，第二个有两个，我想垂直居中第一个

对于潜台词，我想垂直于顶部

下面是我尝试使用的代码：

<div class="row row-home">
    <div class="col-sm-4">
        <a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-1.png" alt="Schody" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#schody" title="Kliknij, aby dowiedzieć się wiecej.">Schody</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
    <div class="col-sm-4">
        <a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-2.png" alt="Balustrady" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#balustrady-i-ogrodzenia" title="Kliknij, aby dowiedzieć się wiecej.">Balustrady i ogrodzenia</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
    <div class="col-sm-4">
        <a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej."><img src="/images/home-3.png" alt="Meble" class="center-block img-responsive" /></a>
        <div class="text">
            <h2><a href="/oferta.html#meble" title="Kliknij, aby dowiedzieć się wiecej.">Meble</a></h2>
            <h3>Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.</h3>
        </div>
    </div>
</div>

它几乎可以工作，但如果h3在其中一个块中的文本较少，则该文本将与底部对齐，h2向下

这里是现场直播

我创建一个图片来展示它应该如何工作

---

由于

h2

元素彼此不知道，我建议您给它们一个高度，否则您将需要大量的标记更改

在这里我添加了高度：28px到

.row home.text h2

规则

.row home.text{
显示器：flex；
弯曲方向：立柱；
-ms-flex方向：列；
位置：相对位置；
文本对齐：居中；
填充：10px 20px 30px；
利润率：0px自动40px；
宽度：100%；
身高：100%；
最大宽度：236像素；
z指数：1；
}
.row home.text h2{
显示器：flex；
弯曲方向：立柱；
-ms-flex方向：列；
证明内容：中心；
弹性：10自动；
位置：相对位置；
颜色：白色；
字体大小：14px；
高度：28px；
字体大小：粗体；
文本转换：大写；
边缘顶端：40px；
边缘底部：0px；
z指数：2；
}
.行主页.文本h3{
位置：相对位置；
颜色：白色；
字体大小：12px；
文本对齐：对齐；
文本转换：大写；
文本最后对齐：居中；
z指数：2；
}

洛雷姆·伊普苏姆·多洛·希特，阿迪皮·希恩精英。无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳。Maecenas eu bibendum sem。
洛雷姆·伊普苏姆·多洛·希特，阿迪皮·希恩精英。无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳。Maecenas eu bibendum sem。
洛雷姆·伊普苏姆·多洛·希特，阿迪皮·希恩精英。无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳，无蜗壳。Maecenas eu bibendum sem。

我考虑过这种方法，但是如果h2有3个衰老/行呢？这种方式的高度应该超过28px，我正在寻找自动设置属性的方式high@user1195901过一会儿我会再看一看……如果需要更改标记，可以吗？取决于：）我必须使用h2和h3，因为这对SEO很重要。我发现了第二个问题，也许你知道如何帮助我：我将中间块从移动到，因为我只想单击没有边距的照片，但在这之后，水平在IE和其他浏览器上不起作用，但比768px小。@SkuterPL这里有一个第二个版本的更新，很抱歉延迟，非常忙（顺便说一句，我收到了你的邮件）@SkuterPL关于Safari的另一个问题，我无能为力，因为我自己没有并使用Safari。请查看我的回答并对其进行评论，如果有不清楚或遗漏的地方，请告诉我。如果没有，那么如果你能接受答案就太好了。很抱歉我迟到了，一切都好，非常感谢你的帮助。

    #home .text {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    text-align: center;
    padding: 10px 20px 30px;
    margin: 0px auto 40px;
    width: 100%;
    height: 100%;
    max-width: 236px;
    z-index: 1;
}

#home .text h2 {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    position: relative;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0px;
        z-index: 2;
    }
#home .text h3 {
    position: relative;
    color: white;
    font-size: 12px;
    text-align: justify;
    text-transform: uppercase;
    text-align-last: center;
    z-index: 2;
}