Why do my 2 divs inside a footer go in different corners?

while making a footer for a school task I encountered this problem: both texts should be on the same line, but one goes higher and one goes lower

Divs in different corners

I tried to put a link in the left side of the footer and some text in the right side. For some reason when I split the divs into their positions they end up like this. Link goes in left top corner and text goes in bottom right corner. I'm trying to get them both VERTICALLY centered but nothing I do gets them both there. I've managed to get both in the center by themselves but never both at the same time. What is going on here?

Here's my html:

<footer>
    <div class="link_class">
        <a href="./" class="link_class">asd</a>
    </div>
    <div class="copy_class">
        <p>&copy; dsa</p>
    </div>
</footer>

and here's the css:

footer{
    width: 20%;
    height: 5%;
    background-color: gray;
    display: flex;
    justify-content: space-between;
}

3 answers

  • answered 2020-10-29 15:11 Anzor Asadov

    if you want them to be on separate lines then

      align-items: center;
      flex-direction: column;
    

    and leave out justify-content

  • answered 2020-10-29 17:05 Casana

    In your example, the cause is not flex behaviour.

    Native browsers styles apply margin to 'p' tags (margin-block-start: 1em;margin-block-end: 1em;) but not to 'a' tags. To solve it, you have some simple options:

    • Apply margin: 0 to your 'p'
    • Change the p tag with another that doesn´t have default margins.

    Here is the reference of the default browsers styles: https://www.w3schools.com/cssref/css_default_values.asp

  • answered 2020-10-29 17:07 corn on the cob

    Just add this, which aligns them next to each other using the magical powers of flexbox.

    align-items: center;
    

    footer{
        width: 20%;
        height: 5%;
        background-color: gray;
        display: flex;
        align-items: center;
    }
    <footer>
        <div class="link_class">
            <a href="./" class="link_class">asd</a>
        </div>
        <div class="copy_class">
            <p>&copy; dsa</p>
        </div>
    </footer>