YoungZeeZee
Coder
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:
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;
}