Kevin Powell - Community•3mo ago

Vertical alignment without wrapper?

Problem: https://codepen.io/peendoc/pen/YzMgrwN I want the links to be clickable along the entire height of the ul but also the text to be vertically centered. Do I need a wrapper inside the a tags to accomplish this? I know there are different techniques but the ones I've seen need a wrapper that is bigger than the text being wrapped, and I'm just wondering if there is any modern CSS way to do it that doesn't need an extra wrapper in this specific example.

peendoc

CodePen

Vertical Alignment Problem

...

2 Replies

Chris Bolson•3mo ago

Rather than using inline-block on the a elements you could use display: flex or display: grid along with their corresponding center alignment properties.

a {
  outline: 1px solid purple;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
}

a {
  outline: 1px solid purple;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
}

a {
  outline: 1px solid purple;
  display: grid;
  place-content: center;
  height: 100%;
  padding: 0 10px;
}

a {
  outline: 1px solid purple;
  display: grid;
  place-content: center;
  height: 100%;
  padding: 0 10px;
}

Host•3mo ago

Great! Thanks!

Gaming

Programming

Vertical alignment without wrapper?