Вертикально выровнять несколько строк с родительским div - PullRequest
0 голосов
/ 12 мая 2018

Как я могу выровнять средний div так, чтобы обе линии были центрированы вертикально?

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.second {
  text-align: left;
  flex-grow: 2;
}
img {
  margin-right: 20px;
}
<div class="container">
  <div>
    <img src="http://via.placeholder.com/75x75">
  </div>
  <div class="second">
   <h2>Please vertically center both</h2>
   <p>of us!</p>
  </div>
  <div>
   Right
  </div>
</div>

1 Ответ

0 голосов
/ 12 мая 2018

Добавить h2,p{margin:0} для удаления поля по умолчанию, заданного для h2 и p tag

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.second {
  text-align: left;
  flex-grow: 2;
}

img {
  margin-right: 20px;
}
h2,p{margin:0}
<div class="container">
  <div>
    <img src="http://via.placeholder.com/75x75">
  </div>
  <div class="second">
    <h2>Please vertically center both</h2>
    <p>of us!</p>
  </div>
  <div>
    Right
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...