Я пытаюсь выяснить, как выровнять мои ссылки, чтобы они находились в центре навигационной панели, в отличие от того, как они теперь находятся наверху. Я приложил то, что я сделал до сих пор, но я не могу понять, как выровнять ссылки, чтобы быть посередине. Я приложил то, что я сделал ниже. Любая помощь будет принята с благодарностью.
Я пробовал различный контент и выравнивание текста, а также позицию, но безрезультатно. Однако я все еще только учусь и, возможно, не попробовал все
<body>
<header>
<div class="navbar">
<a href="index.html"><img src="images/logo.png" alt="logo"></a>
<a href="home.html">Home</a>
<a href="#design">Design</a>
<div class="dropdown">
<button class="dropbtn">Photo
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#phportrait">Portrait</a>
<a href="#phland">Landscape</a>
<a href="#phstreet">Street</a>
<a href="#phproduct">Product</a>
</div>
</div>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</div>
</header>
* {
padding: 0;
margin: 0;
}
/* Navbar */
header {
align-content: center;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: black;
font-family: futura-pt, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
font-weight: 600;
color: #939393;
text-align: center;
padding: 35px;
text-decoration: none;
letter-spacing: 4px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
letter-spacing: 4px;
border: none;
outline: none;
color: #939393;
font-weight: 600;
padding: 35px 35px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover , .dropdown:hover .dropbtn {
color: white;
transition: background-color 200ms ease-out;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #3E3E3E;
}
.dropdown:hover .dropdown-content {
display: block;
}