将动态内容的子级垂直对齐到中间，但在整个行中共享相同的“中间基线”

Question

[如果有人对这个问题的措词有更好的表达，请编辑，我在寻找答案时都在努力寻找什至。

我有一排四列，每列都有标题和描述。长度是动态的，我想将所有长度对齐到中间。但是，我希望所有内容都均匀对齐-因此标题排成一行，描述排成一行。我正在使用Bootstrap。

我想要什么

但是，我找不到任何简单的方法来解决此问题。我有点用绝对位置来解决这个问题，但是它导致孩子们超出了他们的父母，这会带来一些问题。

HTML

<!-- lots of these -->
<article>
    <h3>Dynamic title</h3>
    <p>description</p>
    <div class="hidden">
        <h3>Dynamic Title</h3>
        <p>description</p>
    </div>
</article>

CSS

article { position:relative; padding-top:30px; display:flex; }
.hidden { opacity:0; visibility:hidden; }
article > h3 { position:absolute; bottom:50%; padding-top:inherit; padding-right:inherit; }
article > p { position:absolute; top:50%; padding-right:inherit; }

但是，如果您查看此fiddle，则无法控制每行之间的间距。绝对位置将元素拉出其位置。它使该解决方案显得不那么理想。

是否有更好的方法可以做到这一点？如果需要（或作为调整），我不介意使用JS。

Answer 1

如果您选择自定义而不是引导程序（因为您没有提到您使用的是哪个版本的引导程序。）。>

HTML会这样。

<div class="article">
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
    <div class="box">
        <h1>Lorem Ipsum is simply dummy text of the printing and</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
    </div>
</div>
CSS会这样

.article {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto; }

.article .box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-basis: 33.333%;
      -ms-flex-preferred-size: 33.333%;
          flex-basis: 33.333%;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  max-width: 33.333%;
  padding-left: 15px;
  padding-right: 15px; }

@media (max-width: 767px) {
  .article .box {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%; } }

.article .box h1 {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  border: 1px solid green;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%; }
这里是Demo

如果使用Bootstrap4。Example

希望获得帮助。