Rui Farinha Rui Farinha - 1 year ago 101
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 www.jornaldalusofonia.pt

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

Thank you,
Rui Farinha

Answer Source

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 {
    margin-top:0;
}

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.