CSS CSS vertikal zentrieren

AT-AT

Cadet 4th Year
Registriert
Sep. 2020
Beiträge
84
Hi, ich baue gerade auf meiner Website eine Navigationsleiste und möchte, dass die Buttons vertikal in der Mitte auf dem blauen Hintergrund sind. Das bekomme ich aber nicht hin.

So sieht die Website aus:
1636209997154.png



Der HTML Code der Buttons
HTML:
<body>
    <nav class="waveB backgr">
        <ul>
            <li><a href="">Text #1</a></li>
            <li><a href="">Text #2</a></li>
            <li><a href="">Text #3</a></li>
            <li><a href="">Text #4</a></li>
            <li><a href="">Text #5</a></li>
            <li><a href="">Text #6</a></li>
            <li><a href="">Text #7</a></li>
        </ul>
    </nav>
</body>


Der CSS Code der Buttons:
CSS:
body {
    margin: 0;
    font-family: "Roboto";
    color: #ffffff;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    padding: 100px;
    text-align: center;
}

nav {
    text-align: center;
}


nav ul li {
    display: inline-block;
    margin:  0 30px;
    padding: 12px;
    font-family: "Roboto";
    font-size: large;
    font-size: 20px;
    color: #ffffff;

    border-style: hidden;
    border-width: 0px;
    border-radius: 50px;
    background: #03254c;
}

nav ul li a {
    text-decoration: none;
    color: #ffffff;
}


.waveB {
    aspect-ratio: 960/80;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -16px;
    margin-bottom: -1px;
    }
    .backgr {
        background-image: url("SVG/background.svg");
    }
 
Am einfachsten finde ich die Verwendung eines flex Containers. Dann wäre das Attribut align-items: center zu verwenden.
 
Oder "vertical-align:center; oder vertical-align:middle;" ?
 
Dynamisch:

Code:
.waveB{
  display:flex;
}
.waveB > ul{
  align-items:center;
}

Fake-Center, wenn bekannt ist wie groß die leiste ist:

zb 300px, und die nav ist 50px hoch:

Code:
.waveB > ul{
  margin-top:125px;
  margin-bottom:125px;
}
 
Zurück
Oben