具有不同大小的内容 + 分隔线的相等 flexbox 网格

Question

我目前正在开发一个 .psd 模板并使用 Bootstrap 4。我有一个部分有问题，其中包含具有不同内容的多行和多列。主要问题是一列，其中标题内部的文本换成了两行。如何将其他单行标题居中在与此相关的其他块中？

Image of the section from mockup

还有一个关于分隔线的问题。将它们插入到模型中更好的选择是什么？通过使用之前/之后？

谢谢。

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3 block">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" </script>
  < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
</script>

Answer 1

首先，从第一个 <div class="col-md-3"> 中删除 block，以便它们都顶部对齐。

其次，由于h4 无法看到彼此（不是兄弟姐妹），您要么需要给他们一个固定的高度（您可以使用媒体查询针对不同的屏幕尺寸进行调整）或使用脚本。

这是一个使用固定高度的示例，我在其中添加了这条规则：

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

这是我的另一个答案how to get header from cards or similar to have the same height with flex box?，它有一个脚本版本，还链接到我制作的另一个 CSS 解决方案。

堆栈sn-p

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>