i class icons not centering!

Question

On the code below, the Icons wont vertically center... it only happens in this app and its very frustrating. I tried to vertically align but it doesnt seem to work on here...
https://code.sololearn.com/W3GaAprX9p53/?ref=app

These are Font Awesome icons by the way

Answer 1

Yeah I wonder where the icons are in the mobile version 😂

Answer 2

vertical-align

Answer 3

it doesn't vertically align on a browser (chrome browser on sololearn)

Answer 4

On my desktop browser the icons are still not centering vertically. Thanks anyway. And SoloLearn keeps crashing when im looking at that code in particular on my mobile. Have no idea why

Answer 5

Yea! haha! Yet if you put it all into CodePen for example, it works all fine. Its just SoloLearn

Answer 6

I'll check it in the web browser tomorrow off to sleep now

Answer 7

You could add this:

.menu {
width: 100%;
position: absolute;
left: 0;
right: 0;
margin: auto
}

Answer 8

It didnt work for me 😔

Answer 9

🤔 Worked for me...

https://code.sololearn.com/WQ73pMI89nyi/?ref=app

Answer 10

You did mean horizontally center, correct? The request for vertically centering didn't make sense to me, but we can make that happen too.

Answer 11

Yikes. I just opened up on browser and I see what you mean. 🤔

Answer 12

I can't even see the icons after the menu is open in SoloLearn mobile, but hopefully I fixed it (sort of -- very hacky) in SoloLearn web browser.

.fa {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: auto;
}

No horizontal centering of the nav as a whole in SoloLearn web browser though, but I guess it's still vertically centered.

Answer 13

nn Jay

Answer 14

No problem.

.menu {
height: 100%;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
}

Updated in same Code Playground project previously linked.

Edit: "width: 100%;" is better, so I updated it.