-2

<li style="height: 10px; font-size: 40px;">
    <span style="position: absolute;">40px</span>
</li>

How to center <span> vertically? It should work for any height and font-size of <li>.
Without using display: flex for <li>. Interesting how to solve this with styling <span>, is it possible?

oleedd
  • 388
  • 2
  • 15
  • the problem you'll have is span in absolute position has to be in an element relative. And this relative element has to have a size for the absolute to be positioned by transform translate. So either you can give a size ti the li, or you have another element inside the li which will give a size for the absolute span to be positioned. – pier farrugia Dec 02 '22 at 13:59

1 Answers1

-1

This should work

span {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

li{
   position:relative;
}

However, I'd suggest using display:flex for this kind of thing

Coopero
  • 296
  • 2
  • 10
  • 1
    Please don't use `` for anything other than actual tables, unless you're building email layouts for ancient HTML parsers, there are far better options for building layouts.
     – DBS Dec 02 '22 at 14:04
  • @oleedd take a look to flexbox or grid – Sfili_81 Dec 02 '22 at 14:08