Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to center the navbar in this case (Flexbox and CSSgrid)

Hi All,
I am new here and it is my first question :)
I am playing with css grid and flexbox together and i have this issue.

The header has two equally sized boxes
I am not able to the center the li tags within the nav box just like i did with .header.
How is it possible with flexbox? As t the moment the li tags are on the top of the box.
I tried what i did the .header box but no luck.

Thank you in advance for your kind help.
The codes are:
HTML:
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    text-align: center;
    margin: 0.313rem;
    width: 100vw;
    height: 100vh;



    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas:
        "h h h h  h h h h  h h h h"
      
    ;

}

header {
    background: lightblue;
    grid-area: h;
}

nav {
    background: lightcoral;
}




/* NAVIGATION */

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;



}

nav,
.header {
    flex: 1;
}

.header {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 1; */

}

.header p {
    border: 1px solid green;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0.625rem 1.25rem;

}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    color: greenyellow;
    transition: .5s;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* align-items: flex-end; */


    flex-wrap: wrap;
}



nav ul li {
    border: 1px solid green;

}

CSS:
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    text-align: center;
    margin: 0.313rem;
    width: 100vw;
    height: 100vh;



    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas:
        "h h h h  h h h h  h h h h"
      
    ;

}

header {
    background: lightblue;
    grid-area: h;
}

nav {
    background: lightcoral;
}




/* NAVIGATION */

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;



}

nav,
.header {
    flex: 1;
}

.header {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex: 1; */

}

.header p {
    border: 1px solid green;
}

nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0.625rem 1.25rem;

}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    color: greenyellow;
    transition: .5s;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    /* align-items: flex-end; */


    flex-wrap: wrap;
}



nav ul li {
    border: 1px solid green;

}
 
Post your html code please.
I am sorry, here is the html code

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/gridflex4.css">
    <title>GridFlex4</title>
</head>

<body>

    <div class="wrapper">
        <header>
            <div class="header">
                <p>
                    Header
                </p>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Info</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Prices</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </nav>
        </header>
      
    </div>

</body>

</html>
 
You mean center like this -
View attachment 1821

If so, add this below .header p -
CSS:
nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Thank you very much for your kind help.
Basically header is the flex-container and ul is the flex-item. I tried to move li only. Did not try this before.

How professional is to use height for any responsive site? I was told that better to use padding to expand the box size and use relative units like %, rem etc? I also heard that in one tutorial video.
Could you confirm that?

Thank you.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom