垂直对齐元素以匹配相邻元素中间线[重复]

Question

这个问题在这里已有答案：

• How do I vertically center text with CSS? [duplicate] 38回答
• How to Vertical align elements in a div? 26回答
• How to align a <div> to the middle (horizontally/width) of the page [duplicate] 27回答
• How to vertical align an inline-block in a line of text? 2回答

我有一个按钮，一个div和一个跨度相互相邻的一条线

我需要所有这些像这样垂直对齐中心

下面是我的代码

button{
  height: 50px;
}

div{
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}
h1{
  display: inline-block;
}

<div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>

Answer 1

我建议在这种情况下使用flex。

如果在元素周围包装容器，则可以将子元素与中心对齐。有关示例，请参阅代码段。

button{
  height: 50px;
}

.container div{
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}
h1{
  display: inline-block;
}

.container {
display:flex;
align-items:center;
}

<div class="container"><div></div>
<button>Button</button>
<span>Span</span>
<div>div</div>
</div>

我希望这有帮助。

Answer 2

如果引入父元素，则可以使用flexbox：

.wrapper {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  border: 1px solid red;
}

button {
  height: 50px;
}

.wrapper>div {
  display: inline-block;
  height: 70px;
  border: 2px solid black;
  padding: 10px;
}

h1 {
  display: inline-block;
}

<div class="wrapper">
  <div></div>
  <button>Button</button>
  <span>Span</span>
  <div>div</div>
</div>