1

I am trying to keep a piece of text rendered within an li element, but I don't know how to do it. I've looked up tutorials that say to use line-height, vertical-align and others, however I can't get any of them to work.

I am trying to keep the 'Shop' text both vertically and horizontally aligned within the li element. How can I do this?

ul {
  position: absolute;
  padding-left: 0px;
  width: 100%;
  height: 15%;
  top: 1%;
  list-style-type: none;
  background-color: #f8d7d7;
}

li {
  float: left;
  width: 10%;
  height: 100%;
  background-color: green;
  text-align: center;
  font-size: 2.5vw;
}
<ul>
  <li>
    Shop
  </li>
</ul>

Here is a fiddle:

https://jsfiddle.net/vajzyeqw/1/

Akshay Mulgavkar
  • 1,727
  • 9
  • 22
Perplexityy
  • 561
  • 1
  • 9
  • 26
  • 1
    Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) – Viral Feb 11 '20 at 05:10

2 Answers2

0

Update your li style to 

li {
  width: 10%;
  height: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5vw;
}

Checkout the snippet 

ul{
  position: absolute;
  padding-left: 0px;
  width: 100%;
  height: 15%;
  top: 1%;
  list-style-type: none;
  background-color: #f8d7d7;
}
      
li{
    width: 10%;
    height: 100%;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vw;
  }   
<ul>
  <li>
   Shop
  </li>
</ul>

display: flex; justify-content: center; align-items: center; font-size: 2.5vw; }

Akhil Aravind
  • 5,741
  • 16
  • 35
-1

Add

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

to your .li and you can remove float: left; and text-align: center;.

Andus
  • 1,713
  • 13
  • 30
  • Even if this question is eventually closed, providing a working solution gets a downvote makes non sense because it means "this answer is not useful", not sure why people love doing this. – Andus Feb 11 '20 at 13:04