如何在同一行中垂直对齐跨度和div

Question

我有多行文本和div，如下所示：

<div>
  <span>Adeline</span><div style="display:inline; height:20px, width:20px, background-color: blue">hi</div>
</div>
<div>
  <span>Ted</span><div style="display:inline; height:20px, width:20px, background-color: green">hi</div>
</div>
<div>
  <span>Sara</span><div style="display:inline; height:20px, width:20px, background-color: coral">hi</div>
</div>

如何确保每一行的跨度和div垂直对齐？

Answer 1

您是否尝试过vertical-align: middle用于内联元素的这项工作！将其添加到您的跨度和div

Answer 2

默认情况下，内联元素都将显示在同一行上。不过，您可以使用vertical-align:属性更改其位置，该属性接受5个参数之一：基线，文本顶部，文本底部，子和超级。 我在您的示例中看到，您正在对div应用高度和宽度，要使其正常工作，必须首先应用display: inline-block属性。这使您可以调整内联元素的大小。 希望这会有所帮助。