以用户列表为中心

Question

我有这段代码

.selection_user {
  display: block;
  background-color: #2D2C31;
  text-align: center;
  line-height: 75px;
}

<div class="select_user_menu">
  <div class="selection_user">User1</div>
  <div class="selection_user">Username</div>
  <div class="selection_user">User</div>
</div>

我要做的是将用户列表集中在一行中。

示例：

Answer 1

你可以在里面创建另一个div元素，然后在父元素上使用Flexbox。

.select_user_menu {
  border: 1px solid black;
  display: flex;
  justify-content: center;
}
.selection_user {
  line-height: 75px;
}

<div class="select_user_menu">
  <div class="wrap">
    <div class="selection_user">User1</div>
    <div class="selection_user">Username</div>
    <div class="selection_user">User</div>
  </div>
</div>

Answer 2

您可以将三个用户名放入一个包装器元素，您将display: inline-block;应用text-align: center应用于外部容器以将该包装器和text-align: left;应用于子元素以进行左对齐那里的文字：

.select_user_menu {
  text-align: center;
}

.select_user_menu>div {
  display: inline-block;
}

.selection_user {
  background-color: #ddd;
  text-align: left;
  line-height: 35px;
  padding: 20px;
}

<div class="select_user_menu">
  <div>
    <div class="selection_user">User1</div>
    <div class="selection_user">Username</div>
    <div class="selection_user">User</div>
  </div>
</div>