CODEWITHSUNDEEP
csssass
radtelbi
radtelbi

Reputation: 635

CSS line-height invert proportionally to the font-size

I am using the css line-height propriety to position the :beforetext of the li element vertically in the middle of it's border as you can see in the snippet. My problem is that I want it to stay at the middle if the font size changed (for example if the user used the zoom text only functionality of the firefox browser). I thought of using line-height: calc(1 / 2em) but this wouldn't work since the / operator accepts only a number at the right side. here is my code

li {
     list-style-type: none;
     width: 20%;
     float: left;
     font-size: 10px;
     position: relative;
     text-align: center;
     text-transform: uppercase;
     color: purple;
}
li:before {
     width: 40px;
     height: 40px;
     border: 4px solid purple;
     content: counter(step);
     counter-increment: step;
     line-height: 40px;
     font-size: 15px;
     display: block;
     text-align: center;
     margin: 0 auto 10px auto;
     border-radius: 50%;
}
<ul>
<li> element</li>
<li> element</li>
<li> element</li>
<ul>

Upvotes: 0

Views: 356

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

you can use flexbox to align items inside your li which I think is a better solution than line-height

Try : 

  display: flex;
  align-items: center;
  justify-content: center;

in your li:before and remove the line-height. I think you will get the desired result.

Hope this helps

Upvotes: 2

Related Questions