Rui Farinha Rui Farinha - 8 months ago 84
CSS Question

Joomla module vertical align

I have this Custom HTML module with 9 flags inserted in the position mainmenu as you can see here

How can I give it CSS instructions so it stays vertically aligned in the middle of the bar.

Thank you,
Rui Farinha


Using Flex this is quite simple, just do the below:

#jsn-pos-mainmenu {
    float: left;
    display: flex;
    align-items: center;
    justify-content: space-between;

And then remove the extra margin top on the form input:

.jsn-modulecontainer[class*="display-"] form {

NOTE: You must prefix your CSS for flex using autoprefixer tool, or any tool you choose. Also note that flexbox does't work with older verisons of IE9 and below , also older versions of safari.