Vertical Align Text In li Tag Joomla Menu Button

I was matching another designer’s template where there are 4 big buttons, in different colors, with different icons, and different links.

Very nice. I was using Joomla 3.8 so I created a menu and gave it a style of the color of the button such as “red” for the first button, so each menu item had it’s own class. I had a difficult time when I had three words on the first button, but only 1 word on the other buttons. The line spacing to fit the three lines needed to be “line-height: 1.2em;”, but this made the text on the other three buttons at the top of the box.

The answer was the display option mixed with the line-height in combination with a dash of fixed height.  Then align it in the middle.

#feature-menu ul li a {
font-size:2vw;
line-height: 110px;
height: 120px;
display: table-cell;
vertical-align: middle;
}

Then overwrite that style with a specific line-height.

#feature-menu ul li a.red {
line-height: 1.4em;
}

I hope this helps someone else out there…

 

This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *