Help centering horizonally and vertically

Curriculum Help Certification Projects
#1

Tell us what’s happening:
Hi everyone, so for whatever reason, I just haven’t quite figured out how to reliably center code horizontally and vertically. It seems like I always struggle in these situations, and sometimes am able to figure it out, and sometimes not.

I am running into this issue in two areas of my webpage, the first in the id=“welcome” div where I would like to center not just horizontally, but also vertically the text in this section.

The second is in the id=?“contact-links” div where I would like to center horizontally the group of links. Here I tried it with, text-align: center, but that didn’t seem to work. I also tried it with margin-left: auto; & margin-right: auto, but that didn’t seem to work too well either.

Thank you so much in advance!!!

Your code so far
https://github.com/leonardmohr/Free-Code-Camp-CSS/blob/master/Personal%20Portfolio%20Project.html

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
#2

Hey Leonardmohr,

SOLUTION 1 - id=“welcome”

Here are some solutions. I have a hard time sometimes too with these properties:

margin: 0 auto;
text-align: center;

From what I’ve found the property
margin: 0 auto ;
is for centering the container itself

text-align: center;
should deal with the properties within the container.

Not sure whats happening in this instance to not make it work. Usually you can define the height and width of the container and move things to the center with one of the two or align-content.

Quickest way for me would be to add some margin to the top of the div containing the h1 and h2 elements. Something like:

#welcome > div {
margin: 12rem auto 0 auto;
}

( You could do something similar with padding top and bottom too ) - Look at dev tools to see how this is effecting the elements.

Personally I would make the div directly beneath it have a class of .welcome-container personally. Although your way of targeting the direct ‘>’ div works as well. From there,

You could make it a flex container as well.

#welcome > div {

        width: 1280px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;

    }

I’m sure there is easier ways but I would usually do one of the two. Although I’m pretty sure adding that much margin-top to elements is bad practice. Others can advise.

SOLUTION 2: id=“contact-links”

This is a bit easier imo.

You have the #contact-links flex container set to

#contact-links {
display: flex;
flex-direction: row;
}

You don’t need flex-direction at all in this case as row’s the default. However you were correct about display:flex; but you should use justify-content: center in this case instead of flex-direction. It will move your flex items to the center of the page in this instance. Than after you set up your flex container with the justify content property you can add some margin-right to the ‘a’ elements.

#contact-links a {

        margin-right: 1rem;

    }

That should look okay. Also in future it may be easier to set up a ul for links like that in the Footer.

A great tool for Flexbox is http://flexboxfroggy.com/

Helps a lot.

Let me know if anything isn’t completely clear.

Take Care

1 Like
#3

Hi Dobs,
Thanks so much! I like the idea of just turning the #welcome>div into a flex container and justify-content: center; seems pretty easy. I think that’s the trouble I have, is it really depends upon the situation.

And I also understand the second problem now. Thanks so much!!

1 Like
#4

No problem, best of luck!