Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc
html
<div class="topnav">
<div class="topnav-centered">
<a class="topnav-centered" href="#home">
<img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;" height="80px;" class="img-fluid">
</a>
</div>
<a href="#about">Über</a>
<a href="#gamemodes">Gamemodes</a>
<div class="topnav-right">
<a href="#shop">Shop</a>
<a href="#staff">Team</a>
</div>
</div>
</div>
css
.topnav {
position: relative;
list-style-type: none;
overflow: hidden;
background-color: #181818;
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
transition: all .2s ease-in;
font-weight: 700;
text-transform: uppercase;
}
.topnav a {
float: left;
color: white;
text-align: top;
align-items: start;
padding-top: 30px;
padding-right: 100px;
padding-bottom: 30px;
padding-left: 100px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
color: #5205ed;
}
.topnav-centered a {
float: none;
display: inerhit;
right: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
.topnav-right {
float: right;
align-items: end;
}
.right {
justify-content: flex-start;
}
.left {
justify-content: flex-end;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav-right {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: center;
right: 0;
top: 0;
}
.topnav.responsive a {
float: right;
display: inline-block;
text-align: left;
}
}
@media screen and (min-width: 800px) {
div .max-width {
max-width: 60%;
margin: 0 auto;
box-shadow: none;
}
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
body {
padding: 0px;
background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
color: black;
font-size: 20px;
}
