KPC
Kevin Powell - Community•16h ago
the_paras

CSS Vertical Text Alignment

I haven't messed with my website in a few months and I've been sick for 2 weeks. Trying to add a new section of buttons and my brain is frying trying to get the text to align. 😭 
.nav2{
  background-color: #1C1C1C;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  border-radius: 20px;
  margin: 0em 0em 0em 0em;
  padding: 0px
}

.nav2 li {
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  padding: 1em 0em 0em 0em;
  line-height: 3em;
  height: 5em;
  width: 5em;
}

.nav2 a{
color: #ffffff;
text-decoration: none;
}
.nav2{
  background-color: #1C1C1C;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  border-radius: 20px;
  margin: 0em 0em 0em 0em;
  padding: 0px
}

.nav2 li {
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  padding: 1em 0em 0em 0em;
  line-height: 3em;
  height: 5em;
  width: 5em;
}

.nav2 a{
color: #ffffff;
text-decoration: none;
}
No description
2 Replies
the_paras
the_parasOP•16h ago
I found a solution where someone said to use line-height but, that only work for single lines of text in the buttons. Am I missing something? I must be. I was trying to avoid relying on padding too much since I don't want the box size to change based on the text.
Chris Bolson
Chris Bolson•15h ago
you could remove the padding on the li and use grid (or flex) on the li items themselves. 
.nav2 li {
  display: grid;
  place-content: center;
  
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  /*padding: 1em 0em 0em 0em;*/
  /*line-height: 3em;*/
  height: 5em;
  width: 5em;
  color: #ffffff;
}
.nav2 li {
  display: grid;
  place-content: center;
  
  font-size: 1em;
  background-color: #0F0F0F;
  border-radius: .25em;
  box-sizing: border-box;
  margin: 3%;
  /*padding: 1em 0em 0em 0em;*/
  /*line-height: 3em;*/
  height: 5em;
  width: 5em;
  color: #ffffff;
}
you could also use align-content: center without having to define the display but that may not work on all browsers yet.

Did you find this page helpful?