如何将div和span元素放在同一条线上？

时间：2017-10-03 12:01:25

标签： html css alignment vertical-alignment

我接受了这个丑陋的对齐方式： enter image description here

我不会将文本跨度和div矩形垂直居中，以便在视觉上在一行中。这是我的HTML代码：

＆＃13;
＆＃13; 
	<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>
＆＃13;
＆＃13;
＆＃13;

我不能像＆＃34; paddind-bottom：5px;＆＃34;因为我以编程方式生成这个html代码，字体大小以及div宽度和高度经常变化。所以我的问题是如何在不同尺寸的情况下对齐我的元素？

3 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
span,
div {
  vertical-align: middle;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或者，您可以将所有内容包装在Flex容器中并对齐项目中心。然后，您将删除html元素上的margin: auto声明，如下所示：

＆＃13;
＆＃13; 
.flex {
  display: flex;
  align-items: center;
}

span {
  padding-left: 0.5rem
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我还在span元素中添加了padding-left，因此它们与标签之间的距离很小。

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

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

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题