I’m very at the beginning of web development. I’m currently learning Node.js and React with Vite. I couldn’t center the header menu properly and things I found on internet didn’t work. It is probably something very elementary but as I said I’m a beginner.
Thanks for your help!
function Header() {
const ulStyle = {
display: "flex",
flexDirection: "row",
backgroundColor: "#2b2b2b",
alignItems: "center"
}
const liStyle = {
flexGrow: "1",
flexBasis: "0",
position: "relative"
}
return (
<header>
<h1>Website</h1>
<nav>
<ul style={ulStyle}>
<li><a href="#" style={liStyle}>Home</a></li>
<li><a href="#" style={liStyle}>About</a></li>
<li><a href="#" style={liStyle}>Services</a></li>
<li><a href="#" style={liStyle}>Contact</a></li>
</ul>
</nav>
</header>
);
}
Or in plain HTML
.ulStyle {
display: flex;
flex-direction: row;
background-color: #2b2b2b;
align-items: center;
}
.liStyle {
flex-grow: 1;
flex-basis: 0;
position: relative;
}<header>
<h1>Website</h1>
<nav>
<ul class="ulStyle">
<li><a href="#" class="liStyle">Home</a></li>
<li><a href="#" class="liStyle">About</a></li>
<li><a href="#" class="liStyle">Services</a></li>
<li><a href="#" class="liStyle">Contact</a></li>
</ul>
</nav>
</header>
New contributor
Wittima is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
As @CBbore pointed out you just need to change the alignItems to justify-content.
This is how it will look in your code
.ulStyle {
display: flex;
flex-direction: row;
background-color: #2b2b2b;
align-items: center;
justify-content: center; /* here */
}
.liStyle {
flex-grow: 1;
flex-basis: 0;
position: relative;
}<header>
<h1>Website</h1>
<nav>
<ul class="ulStyle">
<li><a href="#" class="liStyle">Home</a></li>
<li><a href="#" class="liStyle">About</a></li>
<li><a href="#" class="liStyle">Services</a></li>
<li><a href="#" class="liStyle">Contact</a></li>
</ul>
</nav>
</header>6