css - 对齐内嵌 block Div 中的文本？ CSS

Question

我正在尝试对齐一组文本，包括 p 和 h5 html 元素。我正在使用行内 block 显示类型来使文本与标题位于同一行。如果无法与此显示类型对齐，那么如果您可以在同一行提供 3 个标题的替代方式，将会很有帮助。这是我的代码:

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}
/* For devices larger than 400px */

@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */

@media (min-width: 550px) {
  .container {
    width: 80%;
  }
  .column,
  .columns {
    margin-left: 4%;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }
  .one-third.column {
    width: 30.6666666667%;
  }
  #importantpeople {
    text-align: center;
  }
  #manager-1 {
    font-weight: 500;
    text-align: left;
    margin-left: -2px;
    display: inline-block;
    text-align: left;
  }
  #manager-2 {
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-align: center;
  }
  #manager-3 {
    font-weight: 500;
    text-align: right;
    margin-right: 10px;
    display: inline-block;
    text-align: right;
  }

<div class="container">
  <div class="row">
    <div id="seven columns" id="seven-cols">
      <h4 id="aboutus">About Us</h4>
      <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our clients.
        If you want to be apart of this movement then sign up now!</p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row" id="importantpeople">
    <h4 id="managers-head">Our Managers</h4>
    <div class="one-third.column" id="screamer">
    </div>
    <div class="one-third.column" id="kinzu">
    </div>
    <div class="one-third.column" id="swezii">
    </div>
    <h5 id="manager-1">Screamer</h5>
    <h5 id="manager-2">KINZU</h5>
    <h5 id="manager-3">Swezii</h5>
    <p>Just a guy chilling on his computer creating works of art for people</p>
    <p>I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
    <p>I love Web, App and other designing. It is my goal to get rid of bad design in my city.</p>
  </div>
</div>

所以我的问题是如何在同一行上将#screamer 对齐到左侧，将#kinzu 对齐到中心，将#swezii 对齐到右侧？

Answer 1

对#manager-1 使用float: left，对#manager-3 使用float: right。这会将 Screamer 拉到左边，将 Swezii 拉到右边，同时 KINZU 位于中间。

#manager-1 {
    font-weight: 500;
    float: left;
    margin-left: -2px;
    display: inline-block;
    text-align: left;
}

#manager-2 {
    font-weight: 500;
    text-align: center;
    display: inline-block;
    text-align: center;
}

#manager-3 {
    font-weight: 500;
    float: right;
    margin-right: 10px;
    display: inline-block;
    text-align: right;
}