CSS3 > Positioning

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.

Vertical center align text in CSS

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>
 Views: 370 | Post Order: 124



Write for us