如何将 div 和 span 元素沿同一行居中？答案

【问题标题】：how to center div and span elements along the same line?如何将 div 和 span 元素沿同一行居中？
【发布时间】：2018-03-14 14:59:18
【问题描述】：

我收到了这个丑陋的对齐：

我不会将文本跨度和 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 宽度和高度经常变化。所以我的问题是如何对齐我的元素，而不考虑它们的大小？

【问题讨论】：

添加垂直对齐：顶部

标签： html css alignment vertical-alignment

【解决方案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，以便它们与标签之间有一点间距。

【讨论】：

【解决方案2】：

您可以在所有 inline-blocks 上使用 vertical-align: top;，但您应该使用类，而不是内联样式

.alignclass {
  display: inline-block;
  vertical-align: top;
}

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

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

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

【讨论】：

【解决方案3】：

也许Line height可以解决你的问题，

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

【讨论】：