0

So I was forced to work with old technology and got stuck. With flexbox this wouldn't have been an issue, but I can't seem to get it right without it. Here is an example of what I want:

enter image description here

It's supposed to be straight forward, but being accustomed to flexbox made me a cave animal when it comes to old ways of aligning. Here is what I tried based on suggestions online, but the box and text still aren't aligned vertically. Can someone save me? (the green border is for better showing if it is centered) 

<div style="display: table; height: 30px; overflow: hidden; border:1px solid green;">
<div style="display: table-cell; vertical-align: middle;">
test <span style="display:inline-block; width:30px;height: 30px; margin: 0 5px; border: 1px solid #eee;"></span> test2
</div>
</div>
tilly
  • 2,229
  • 9
  • 34
  • 64
  • [https://css-tricks.com/centering-css-complete-guide/](https://css-tricks.com/centering-css-complete-guide/) – Sfili_81 Jun 17 '20 at 06:30

1 Answers1

2

Add vertical-align: middle; to the <span> tag and it shall align.

<div style="display: table; height: 30px; overflow: hidden; border:1px solid green;">
  <div style="display: table-cell; vertical-align: middle;">
    test <span style="display:inline-block; width:30px;height: 30px; margin: 0 5px; border: 1px solid #eee;vertical-align: middle;"></span> test2
  </div>
</div>
yinsweet
  • 2,823
  • 1
  • 9
  • 21
  • This. The line-height alternative would be less flexible in terms of dynamic, since this should be the accepted answer :) – JSRB Jun 17 '20 at 06:33