xxxxxxxxxx
ul{
display: flex;
}
ul > li{
flex-grow: 1;
display: flex;
justify-content: center;
}
xxxxxxxxxx
// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
align-items: center;
}
xxxxxxxxxx
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.list {
display: flex;
justify-content: center;
flex-direction: column; /* <--- I added this */
align-items: center; /* <--- Change here */
height: 200px;
width: 100%;
background: silver;
}
.list li {
background: gold;
height: 20%;
}
xxxxxxxxxx
.navbar {
background-color: #333;
color: white;
}
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Display items in a row */
align-items: center; /* Vertically align items */
height: 50px; /* Set the height of the navbar */
}
.nav-list li {
margin-right: 20px; /* Add spacing between list items */
text-align: center; /* Center-align the text */
}
.nav-list a {
text-decoration: none;
color: white;
}