vertical alignment but vertically

Question

I have following problem where two things are over (in y direction) each other. Following figure should clarify what I mean:

so the 1 with the circle border (as one item) and the text below (as the other item) should get aligned 'vertically', like the green line is (more or less showing).

The problem is that if I search for vertical alignment, there are only explanations of inline vertical alignment.

Can someone tell me what I have to look for please.

the 'code' looks like this:

<div class="item">
     <span class="badge">1</span> 
     <span class="item-text">Text</span>
</div>

The 1 in the circle is already centered, so the text below should align with the middle of the circle.

This is usually called _horizontal_ alignment. Because even though your green line is vertical, the items have to be moved horizontally. — Thomas, Aug 20 '18 at 18:23
hmm that explains why I did not find anything useful ... thank you !! — OcK, Aug 20 '18 at 18:23
And `text-align: center` might go a long way towards solving your issues :) — Thomas, Aug 20 '18 at 18:23
@Thomas that did the job lol - thank you! maybe you can write it as an answer so I can accept it — OcK, Aug 20 '18 at 18:25

score 1 · Accepted Answer · answered Aug 20 '18 at 18:27

1

This is usually called horizontal alignment. Because even though your green line is vertical, the items have to be moved horizontally.

And a simple

.item {
  text-align: center;
}

might be enough to make it happen.

answered Aug 20 '18 at 18:27

Thomas

174,939
50
355
478

vertical alignment but vertically

1 Answers1