Vertical Alignment not working CSS HTML

Question

I have been looking for tutorials how to center text in link. Nothing helped. Could you help me out? HTML:

<nav>

        <a class="but1" href="#"><strong>ART</strong></a>
        <a class="but2" href="#"><strong>VIDEOS</strong></a>
        <a class="but3" href="#"><strong>ABOUT</strong></a>
        <a class="but4" href="#"><strong>CONTACT</strong></a>

</nav>

CSS:

nav a {
    font-size: 500%;
    text-decoration: none;
    color: white;
    Height: 25%;
    width: 100%;
    position:absolute;
    text-align: center;
    vertical-align: middle;
    transform: translate(-50%, -100%);
    left: 50%;
    }

.but1 {
    background-color: #e24e42;
    top: 25%;
    }


.but2 {
    background-color: #e9b000;
    top: 50%;
}

.but3 {
    background-color: #eb6e80;
    top: 75%;
}

.but4 {
    background-color: #008f95;
    top: 100%;
}

I am starter in Web development. To be exact 2 days. If there are HUGE Mistakes, don't judge me.

Have you tried searching google? There are a ton of sites with tutorials on vertically centering content, including many links to stackoverflow. https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Charlie, Aug 17 '17 at 22:10

Bruno Tavares · Answer 1 · 2017-08-18T18:17:28.700

Vertical alignment in CSS was a nightmare just a few years ago.

To try something like vertical-align: middle; means that you didn't even bothered to google it at all.

I woke up from that nightmare the moment I found flexbox. Take a look at this super complete guide on how to flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I think it's appropriated to create navigation menus, I use flexbox every time for that purpose.

EDIT:

I have been there and I know how hard small things can get in the beginning. Keep in mind that if you want to get serious in web design this will happen a lot and you must know how to deal with it alone.

Take a look at this fiddle: http://jsfiddle.net/ZTz7Q/2651/

You will notice that we only apply css flexbox properties on the parent element, defining how the children should be displayed:

align-items: center This is responsible for vertically center your content on the main axis (horizontal by default).

justify-content: flex-start This will align your content on the main axis, pretty much like text-align:left

Take some time to understand the code instead of copy and pasting it. It will help you to improve.

In code I did use it. It doesn't work. And I googled this problem for 2h+. — Dovydas Vaičiukynas, Aug 18 '17 at 09:39

Vertical Alignment not working CSS HTML

1 Answers1