CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
A. Bykov
A. Bykov

Reputation: 288

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

I receiving this ugly alignment: enter image description here

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?

Upvotes: 0

Views: 40

Answers (3)

Dan Kreiger
Dan Kreiger

Reputation: 5516

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.

Upvotes: 1

codesayan
codesayan

Reputation: 1715

Maybe Line height can solve your problem,

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

Upvotes: 0

Johannes
Johannes

Reputation: 67768

You can use vertical-align: top; on all those inline-blocks, but you should use classes, not inline styles

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

Upvotes: 0

Related Questions