html - 居中用户列表

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>