Unable to vertically center text

Question

I am using below css to display some content in the boxes. I am unable to bring the text in center of the box. text-align:center doesn't seem to be working. Also tried line-height: 30px; but it adds space between lines. I need this to be at central.

Is there any property I can set to make text in center of the box?

.sideBarList li {
  width: 100px;
  height: 60px;
  margin: 0;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  background: pink;
  margin: 0 10px 100px 30px;
  display: inline-block;
  vertical-align: top;
  color: black;
  position: relative;
  text-align: center;
  font-family: Arial;
  font-size: 11px;
}

<ul class="sideBarList">
  <li class="li">CDE RTR</li>
  <li class="li">ABC</li>
  <li class="li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li>
</ul>

Do you want the text to be vertical aligned aswell? It is already aligned center — Marc Hjorth, Jul 06 '18 at 19:00
Using padding instead of height may solve your problem: remove height and add `padding: 60px` - you may also want to keep your actual width: `width: calc(100px - 60px)` — pldg, Jul 06 '18 at 19:08
I closed *again* with the same duplicates because they all deal with your issue and they contain your answer, please read all of them carefully and you will get plenty of way to vertical align text (one line or multiple line) — Temani Afif, Jul 06 '18 at 19:16

score 0 · Answer 1 · answered Jul 06 '18 at 18:59

   .sideBarList li {
      width: 100px;
      height: fill;
   margin: 0;
      text-align: center;
      line-height: 30px;
      border-radius: 10px;
      background: pink;
      margin: 0 10px 100px 30px;
      display: inline-block;
      vertical-align: baseline;
      color: black;
      position: relative;
      text-align: middle;
      font-family: Arial;
      font-size: 11px;
}

  <ul class="sideBarList">
            <li class="li">CDE RTR</li>  
            <li class="li">ABC</li> 
            <li class="li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li> 
   </ul>

Do you mean that it is always in the Box? Because it is centered already no? Use height: fill if you want the box to fit, otherwise could you explain your goal a bit more?

Unable to vertically center text

1 Answers1