how to vertical align a span and a div in the same row

Question

I have multiple rows of texts and divs like this:

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

How can I make sure in each row the span and the div are vertically aligned?

Why are you using `div` and setting the style to `display: inline`? Use `span` instead — Morpheus, Jun 28 '19 at 07:54

score 1 · Accepted Answer · answered Jun 28 '19 at 07:54

1

have u tried vertical-align: middle this work for inline elements! add it for your span and div

answered Jun 28 '19 at 07:54

adel

3,436
1
7
20

score 1 · Answer 2 · answered Jun 28 '19 at 08:14

Inline elements will all appear on the same line by default. Though, you can change their position with the vertical-align: property which takes 1 of 5 arguments: baseline, text-top, text-bottom, sub, and super. I see in your example you are applying height and width to the div, for this to work you must first apply the display: inline-block property. This lets you resize inline elements. Hope this helps.

how to vertical align a span and a div in the same row

2 Answers2