htmlcssflexbox

Image-banner and link-wrapper not aligning to center in CSS grid layout when width is set on center-column container

I'm trying to center-align an image and a set of links in the center column of my navigation layout. When I don't specify a width for the .center-column element, the alignment works perfectly. However, when I set the width to 500px, the image and links do not align properly

I've tried adjusting the justify-content, align-items, and setting margin properties on the child elements, but the issue persists.

body {
    margin: 0 auto;
}

.nav-wrapper {
    height: 190px;
    background: #12122C;
    color: #cbcbcb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px;
}

.nav-wrapper > .left-column {
    display: flex;
    align-items: center;
}

.nav-wrapper > .left-column > .icon {
    margin-right: 15px;
    font-size: 2em;
}

.nav-wrapper > .left-column .phone-hour-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.nav-wrapper > .center-column {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 42px;
    width: 500px; /* Causes misalignment */
}

.nav-wrapper > .center-column > .image-banner img {
    width: 216px;
    height: 100%;
}

.nav-wrapper > .center-column > .link-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
<body>
    <div class="nav-wrapper">
        <div class="left-column">
            <div class="icon">
                <i class="fas fa-phone-volume"></i>
            </div>
            <div class="phone-hour-wrapper">
                <div class="phone">555 555 5555</div>
                <div class="hour">10 AM - MIDNIGHT</div>
            </div>
        </div>

        <div class="center-column">
            <div class="image-banner">
                <img src="https://drive.google.com/file/d/1f9Xa3YFEuAYNsMe0gPjzX9ukL45yX6gv/view?usp=sharing" alt="logo">
            </div>
            <div class="link-wrapper">
                <div class="link"><a href="#"></a>Home</div>
                <div class="link"><a href="#"></a>About Us</div>
                <div class="link"><a href="#"></a>Menu</div>
                <div class="link"><a href="#"></a>Contact</div>
            </div>
        </div>

        <div class="right-column">
            123 Any Street  
            Scottsdale, AZ 85251
        </div>
    </div>
</body>

image without the width se

Solution

  • When you give the specific width to the grid div element, it starts from the left align just add the justify-items: center; to the set image center. To use the display:grid use the justify-items instead of justify-content.

    Also, in the link below the image link-wrapper div, add the column-gap: 10px; as you need to change the value. So all the links set the gap from links.

    Here is the code to fulfill your requirements.

    body {
    margin: 0 auto;
}

.nav-wrapper {
    height: 190px;
    background: #12122C;
    color: #cbcbcb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 100px;
}

.nav-wrapper > .left-column {
    display: flex;
    align-items: center;
}

.nav-wrapper > .left-column > .icon {
    margin-right: 15px;
    font-size: 2em;
}

.nav-wrapper > .left-column .phone-hour-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

.nav-wrapper > .center-column {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-gap: 42px;
    width: 500px; /* Causes misalignment */
}

.nav-wrapper > .center-column > .image-banner img {
    width: 216px;
    height: 100%;
}

.nav-wrapper > .center-column > .link-wrapper {
    display: flex;
    column-gap: 10px; /*Change as per requirement*/
    justify-content: space-between;
    align-items: center;
}
    <body>
    <div class="nav-wrapper">
        <div class="left-column">
            <div class="icon">
                <i class="fas fa-phone-volume"></i>
            </div>
            <div class="phone-hour-wrapper">
                <div class="phone">555 555 5555</div>
                <div class="hour">10 AM - MIDNIGHT</div>
            </div>
        </div>

        <div class="center-column">
            <div class="image-banner">
                <img src="https://drive.google.com/file/d/1f9Xa3YFEuAYNsMe0gPjzX9ukL45yX6gv/view?usp=sharing" alt="logo">
            </div>
            <div class="link-wrapper">
                <div class="link"><a href="#"></a>Home</div>
                <div class="link"><a href="#"></a>About Us</div>
                <div class="link"><a href="#"></a>Menu</div>
                <div class="link"><a href="#"></a>Contact</div>
            </div>
        </div>

        <div class="right-column">
            123 Any Street
            Scottsdale, AZ 85251
        </div>
    </div>
</body>