对齐 A Inline-Block Div 内的文本？ CSS

Question

我正在尝试对齐一组文本，包括 p 和 h5 html 元素。我正在使用 inline-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 在同一行时，如何将#screamer 对齐到左边，#kinzu 对齐到中间，#swezii 对齐到右边？

Answer 1

将边距更改为 20%，并反转您设置的方向，确保您使用 % 而不是 px 作为边距。

#manager-1 {
    font-weight: 500;
    text-align: left;
    margin-right: 20%;
    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-left: 20%;
  display: inline-block;
  text-align: right;
  }

Answer 2

对#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;
}

对齐 A Inline-Block Div 内的文本？ CSS

Align Text Inside A Inline-Block Div? CSS

css

inline

block

text-alignment