Question

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.account-select-icon {
  flex: 0;
  font-size: 20px;
}

.account-select-item {
  flex: 1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  flex: 0;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

最后，图标垂直对齐，但中间块中的文本不对齐

我在做什么错了？

提琴：https://jsfiddle.net/7su954x3/

Answer 1

您需要从标题中删除边距：

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.account-select-icon {
  flex: 0;
  font-size: 20px;
}

.account-select-item {
  flex: 1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  flex: 0;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

/* add this */
.account-select-item h3 {
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

没有意识到您是在手动将线高设置为垂直居中，如果您不想这样做，则必须使每个子项也都弯曲，并对其应用对齐项：

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
}

.account-select-icon {
  display:flex;
  align-items:center;
  font-size: 20px;
}

.account-select-item {
  display:flex;
  align-items:center;
  flex-grow:1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  display:flex;
  align-items:center;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

/* add this */
.account-select-item h3 {
  margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

Answer 2

在您的问题中，您询问如何在flexbox中对齐。但是，在您的代码中，.account-select-item不是Flexbox。

相反，您似乎正在使用使用行高的旧样式“ hack”。如果您决定更改.account-select-block的高度或行高，则这会崩溃。

.account-select-block {
  display: flex;
  width: 100%;
  height: 50px;
  /* line-height: 50px; */
}

.account-select-icon {
  flex: 0;
  font-size: 20px;
}

.account-select-item {
  display: flex; /* NEW */
  flex: 1;
  align-items: center; /* NEW */
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
}

.account-select-remove {
  flex: 0;
  font-size: 20px;
  background-color: #ff5200;
  color: #fff;
}

<div class="account-select-block">
  <div class="account-select-icon">
    <i class="fa fa-user-circle" aria-hidden="true"></i>
  </div>
  <div class="account-select-item">
    <h3>Account Name</h3>
  </div>
  <div class="account-select-remove">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</div>

Answer 3

尝试

.account-select-item {
  flex: 1;
  font-size: 14px;
  border: 1px solid #D8D8D8;
  background: #eee;
  cursor: pointer;
  transition: border 0.1s ease;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

文本在flex块中未垂直对齐

3 个答案: