如何将 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

您可以在所有这些 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>

Answer 2

您可以像这样使用 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>

或者，您可以将所有内容包装在一个弹性容器中并使项目居中对齐。然后，您将删除 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，因此它们与标签之间有一点间距。

Answer 3

也许行高可以解决你的问题，

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

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

how to center div and span elements along the same line?

html

css

alignment

vertical-alignment