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
<style>Views: 6103 | Post Order: 124
.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>