CSS CSS vertikal zentrieren

AT-AT · 6. November 2021

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:

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");
    }

Rossie · 6. November 2021

Am einfachsten finde ich die Verwendung eines flex Containers. Dann wäre das Attribut align-items: center zu verwenden.

DualityMind · 6. November 2021

Oder "vertical-align:center; oder vertical-align:middle;" ?

Yuuri · 6. November 2021

http://howtocenterincss.com/

netzgestaltung · 6. November 2021

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;
}

Suche

CSS CSS vertikal zentrieren

AT-AT

Cadet 4th Year

Rossie

Rear Admiral

DualityMind

Lieutenant

Yuuri

Fleet Admiral

netzgestaltung

Captain

Ähnliche Themen