html - 如何使 div 和 span 元素沿同一行居中？

Question

我收到了这个丑陋的对齐方式:

我不会将文本跨度和 div 矩形垂直居中以在视觉上排成一行。这是我的 html 代码:

	<div>
		<div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
		<span style="display:inline-block; font-size: 30px;">label1</span>
		<span style="display:inline-block; width: 50px;">&nbsp;</span>
		
		<div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
		<span style="display:inline-block; font-size: 30px;">label2</span>
		<span style="display:inline-block; width: 50px;">&nbsp;</span>
		
		<div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
		<span style="display:inline-block; font-size: 30px;">label3</span>
	</div>

我不能使用像“paddind-bottom: 5px;”这样的方式因为我以编程方式生成此 html 代码，字体大小以及 div 宽度和高度经常变化。所以我的问题是如何以独立于它们的大小的方式对齐我的元素？

Answer 1

你可以像这样使用vertical-align: middle:

span,
div {
  vertical-align: middle;
}

<div>
  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label1</span>
  <span style="display:inline-block; width: 50px;">&nbsp;</span>

  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label2</span>
  <span style="display:inline-block; width: 50px;">&nbsp;</span>

  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px; margin: auto;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label3</span>
</div>

---

或者，您可以将所有内容包装在一个 flex 容器中，并使元素居中对齐。然后，您将删除 html 元素上的 margin: auto 声明，如下所示:

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

span {
  padding-left: 0.5rem
}

<div class='flex'>
  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label1</span>
  <span style="display:inline-block; width: 50px;">&nbsp;</span>

  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label2</span>
  <span style="display:inline-block; width: 50px;">&nbsp;</span>

  <div style="display: inline-block; background-color: lightgrey; height: 25px; width :40px;">&nbsp;</div>
  <span style="display:inline-block; font-size: 30px;">label3</span>
</div>

我还向 span 元素添加了 padding-left，因此它们与标签之间有一点间距。