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.
2 Replies
Chris Bolson
Chris Bolson2mo 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
Host2mo ago
Great! Thanks!