Текст не выравнивается по вертикали в гибком блоке - PullRequest
Новая
       54

Текст не выравнивается по вертикали в гибком блоке

3 голосов
/ 20 сентября 2019 

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

Ответы [ 3 ]

3 голосов
/ 20 сентября 2019

Вам необходимо убрать поле из заголовка: 

.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>
1 голос
/ 20 сентября 2019

В вашем вопросе вы спрашиваете, как выровнять в flexbox.Однако в вашем коде .account-select-item не является flexbox.

Вместо этого вы, кажется, используете старый стиль 'hack' с помощью line-height.Это развалится, если вы когда-нибудь решите изменить высоту .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>
0 голосов
/ 20 сентября 2019

попробуйте с этим 

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