JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<ul>
    <li><a href="//google.com" aria-selected="true">Google</a></li>
    <li><a href="//bing.com">Bing</a></li>
</ul>

<br/>
<br/>
<p>How to vertically center the text in links while maintaining height (darker background-color)?<p>
<br/>
<br/>
    <p><b>Solved:</b> Use more flex</p>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Helvetic Neue", "Arial", sans-serif;
}
ul {
    display: flex;
	justify-content: center;
    background-color: #333;
    height: 40px;
}
li {
    display: flex;
    flex-direction: column;
	justify-content: center;
    text-align: center;
    list-style: none;
    border-right: 1px solid rgba(255, 255, 255, .3);
    /*
    overflow: hidden;
    position: relative;
    z-index: 0;
    */
}
li:first-child {
    border-left: 1px solid rgba(255, 255, 255, .3);
}
a {
    display: flex;
    flex-direction: column;
	justify-content: center;
    text-align: center;
    flex: 1 0 auto;
    color: #FFF;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
}
a:hover, a:active {
    text-decoration: underline;
}
/*
a:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: -1;
}
*/
a[aria-selected="true"] {
    background-color: #1a1a1a;
}