Saturday, November 17, 2018

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…

 

0 Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>