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

Issue

I receiving this ugly alignment:

I wont text spans and div rectangles to be centred vertically to be visually in one line. Here is my html code:

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

I cannot use the way like "paddind-bottom: 5px;" because I generate this html code programically and font size as well as div width and height changes frequently. So my question is how to align my elements in the way, independent of their sizes?

Solution

You could use vertical-align: middle like so:

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>

---

Alternatively, you could wrap everything in a flex container and align the items center. Then you would remove margin: auto declarations on your html elements like so:

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

I also added padding-left to the span elements so they have a little spacing from the labels.

Answered By - Dan Kreiger

Answer Checked By - Robin (PHPFixing Admin)