With flexbox, how do I align containers together that reside within another larger container?-CodePudding

I am working on completing a landing page on the Odin Project and am stuck with creating my header.

My goal is to align two containers with the same orientation across the page that are located within the header container. Currently, the title-container aligns differently than the header-container which is the container orientation that I desire to have as my outcome. I want them to be vertically aligned so that the content from the first container lines up nicely along the outer edges of the content from the second container.

I have tried using justify-content: space-around which worked for the header-container, but did not work for the title-container. The header-container is currently in the correct orientation for my needs. How can I get the title-container to align the same way vertically as the header-container using flexbox?

Here is the CSS:

* {
    font-family:'Times New Roman', Times, serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}

.header {
    background: #1F2937;
    color: white;
    display: flex;
    margin: 0;
    padding: 8px 0px 64px;
    flex-direction: column;
}

.header-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 64px;
    border: solid black;
}

.title-container {
    display: flex;
    justify-content: space-around;
    border: solid black;
}

This is the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Landing Page Title</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div >
            <div >
                <div >Header Logo</div>
                <div >
                    <div >Link 1</div>
                    <div >Link 2</div>
                    <div >Link 3</div> 
                </div>
            </div>
            <div >
                <div >Website Title, This Site is Awesome!
                    <div >This is where I would put my info... If I had some!</div>
                    <button >Sign Up</button>
                </div>
                <div >
                    <div >This is a placeholder for an image...</div>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

You can use align-items: center to align the items vertically.

.header {
    background: #1F2937;
    color: white;
    display: flex;
    margin: 0;
    padding: 8px 0px 64px;
    flex-direction: column;
    align-items: center;
}

CodePudding user response：

If I understand your question correctly, it seems you may want to add text-align: center; to .title-container

* {
    font-family:'Times New Roman', Times, serif;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}

.header {
    background: #1F2937;
    color: white;
    display: flex;
    margin: 0;
    padding: 8px 0px 64px;
    flex-direction: column;

}

.header-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 64px;
    border: solid black;
}

.title-container {
    display: flex;
    justify-content: space-around;
    border: solid black;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Landing Page Title</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div >
            <div >
                <div >Header Logo</div>
                <div >
                    <div >Link 1</div>
                    <div >Link 2</div>
                    <div >Link 3</div> 
                </div>
            </div>
            <div >
                <div >Website Title, This Site is Awesome!
                    <div >This is where I would put my info... If I had some!</div>
                    <button >Sign Up</button>
                </div>
                <div >
                    <div >This is a placeholder for an image...</div>
                </div>
            </div>
        </div>
    </body>
</html>