以 Flexbox 为中心的两项页脚

Question

I'm trying to create a footer with 2 elements (logo and copyright) using flexbox. This is the code:

 footer { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 45px; } footer div { flex: 1; } footer img { width: 5%; height: auto; } footer p { font-size: 0.7rem; }

 <footer> <div> <img src="https://picsum.photos/200/300" alt="logo"> </div> <div> <p>Copyright Hair Day Salon 2022</p> </div> </footer>

I want to center each element on its side of the flex, but justify-content doesn't work. I also tried to remove flex: 1 from the article and do it afterward, but then the text will wrap into 2 lines and the logo will get bigger (things that I don't want).

What do you think is the issue and how could I center the div elements on the footer? Thanks.

Answer 1

you can use justify-content: center . just remove your

footer div {
 flex: 1
}

to adjust your image

 footer { display: flex; margin: 45px; flex-direction: row; flex-wrap: nowrap; justify-content: center; } footer div { } footer.image-inside { width: 25px; height: 25px; } footer img { width: 100%; height: 100%; object-fit: cover; } footer p { font-size: 0.7rem; }

 <footer> <div class="image-inside"> <img src="https://picsum.photos/200/300" alt="logo"> </div> <div> <p>Copyright Hair Day Salon 2022</p> </div> </footer>

Answer 2

Added some styling and resolved the issue using text-align:

<footer>
        <div class="left">
            <img src="./img/logo2.png" alt="logo">
        </div>
        <div class="right">
            <p>Copyright Hair Day Salon 2022</p>
        </div>
    </footer>



footer {
    border: 1px #CF5F4B solid;
    margin: 45px auto;
}

footer img {
    width: 30px;
    height: auto;
    padding: 15px;
}

footer .left {
    width: 49%;
    float: left;
    display: inline;
}

footer .right {
    width: 49%;
    float: right;
    display: inline;
}

footer p {
    font-size: 0.85rem;
    text-align: right;
}