将多行与父行垂直对齐 div

Question

如何对齐中间 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>

Answer 1

添加 h2,p{margin:0} 以删除给予 h2 和 p 标签的默认边距

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

将多行与父行垂直对齐 div

Vertically align multiple lines with parent div

html

css

centering

flexbox