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

【问题标题】：Vertically align elements to match the adjacent elements middle line [duplicate]垂直对齐元素以匹配相邻元素中线[重复]
【发布时间】：2018-08-08 06:48:46
【问题描述】：

我有一个按钮，一个 div 和一个 span 在一行中彼此相邻

我需要它们都像这样垂直对齐到中心

下面是我的代码

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>

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

如果你引入了一个父元素，你可以使用 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>

【讨论】：

【解决方案2】：

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

如果将容器包裹在元素周围，则可以将子元素对齐到中心。有关示例，请参见 sn-p。

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>

我希望这会有所帮助。

【讨论】：

如果您对此回答感到满意，请接受此回答。谢谢你