时间戳

首页 > 解决方案 > 文本未在弹性块中垂直对齐

html - 文本未在弹性块中垂直对齐

问题描述

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

标签： htmlcssflexboxvertical-alignment

解决方案

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

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

推荐阅读