---

Search posts under CSS3:

---

Vertically center align text in CSS3

How to vertically center align the text inside the box using CSS?

Aligning the text at the center horizontally is easy, just put 'text-align:center;' as style within the element and you are good to go.

However, if we need to vertical center align the text within a box, its tough trying different display properties and thier values.

So we have time tested solution of this problem.

To display the links within the box, we have following code.

<div class="flex">
   <a class="btnLink" href="http://www.aims.unc.edu/">AIMS HOME1 WITH MORE WIDTH asfdadfsd fdsafsd afsdafsd afsd afsdaf sdafsdafsdffsda</a> 
<a class="btnLink" href="http://www.aims.unc.edu/">AIMS HOME2</a> 
<a class="btnLink" href="http://www.aims.unc.edu/"><div>AIMS HOME3</div></a> 
<a class="btnLink" href="http://www.aims.unc.edu/">AIMS HOME4</a>
 <a class="btnLink" href="http://www.aims.unc.edu/">AIMS HOME5</a> 
</div>

The magic CSS code is below.

In this code, we have following css classes

1. btnLink - this is the css style for links that gives it a beautiful look. Remember to not remove the last line 'display:flex' from this class.
2. flex - this is the class for parent div that simply makes the div flexible with direciton as row and wrappable.
3. flex a - gives the spacing between the link boxes.

<style>
.btnLink{
    border-spacing:15px;
    border-collapse:separate;
    font-size: 20px; 
    background-color: #fff;
    font-family: Garamond;
    font-weight:600;
    text-decoration:none;
    width:200px;    
    height:75px;
    overflow:hidden;
    text-align:center;
    color:#1F548A;
    box-shadow:inset 0 0 1em #579ED2;
    margin:5px 0px 5px 0px; 
    align-items: center;
    justify-content: center;
    display: flex;
}

.flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex a {
    margin-left:5px;
}

</style>