JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<nav>
    <ul>
    <li><a href="#">Test Text1</a></li>    
    <li><a href="#">Test Text2</a></li>    
    <li><a href="#">Test Text3</a></li>
</ul>
</nav>

<aside>
    <b>Documentation: </b>
    <ol>
        <li><a href="http://stackoverflow.com/questions/14862604/html-css-center-text-horizontally-and-vertically-in-a-link">http://stackoverflow.com/questions/14862604/html-css-center-text-horizontally-and-vertically-in-a-link</a></li>
        <li><a href="https://coderwall.com/p/lus8rw">https://coderwall.com/p/lus8rw</a></li>
    </ol>
</aside>

CSS

nav>ul>li {
    display: inline-block;
}
nav li {
    background-color: blue;
    height: 200px;
}
nav li>a {
    height: 100px;
    width: 200px;
    background-color: red;

    display: inline-block;
    vertical-align:middle;
    line-height: 100px;
    text-align: center;
}

.multi-line {
    display: table-cell;
    width: 60px;
    height: 40px;
    vertical-align: middle;
}