文本未在弹性块中垂直对齐答案

【问题标题】：Text not aligning vertically in a flex block文本未在弹性块中垂直对齐
【发布时间】：2020-01-21 09:46:57
【问题描述】：

.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/

【问题讨论】：

@Condor 如果不是 100%，它会对齐整个 account-select-item 块，但没有文本

标签： html css flexbox vertical-alignment

【解决方案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>

【讨论】：

如果您确定您的文本永远不会超过一行，则此解决方案有效，因为它依赖于行高。此外，您不能在不破坏对齐的情况下更改 account-select-box 的高度。

【解决方案2】：

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

相反，您似乎正在使用使用 line-height 的旧样式“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>

【讨论】：

【解决方案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;
}

【讨论】：