Text vertikal mit Flexbox zentrieren, Ergebnis nicht erstellen Ich möchte

Question

Ich brauche Hilfe mit diesem, ich bin nicht ganz sicher, wie ich mein Problem in Worten zu erklären, also hier ist ein Bild. this is what it looks like

this is what I want it to look like (from another website) Nicht Stil alle, nur die Zentrierung.

Ich möchte, dass meine Links wie folgt zentriert werden: ÜBER SPENCER HILTBRAND DIENSTLEISTUNGEN KONTAKT

Heres mein CSS

/* Navigation */ 

    .navigation { 
     background: #fff; 
     width: 100%; 
     height: 156px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5); 
    } 

    .nav-item { 
     text-decoration: none !important; 
     font-size: 35px; 
     text-transform: uppercase; 
     transition: 0.3s color; 
     padding: 20px; 
    } 

HTML-Struktur:

<!-- Header --> 
<div class="container"> 
    <nav class="navigation"> 
    <ul> 
     <a class="nav-item">Home</a> 
     <a class="nav-item">About</a> 
     <a class="brand"><i class="orange">Spencer</i> Hiltbrand</a> 
     <a class="nav-item">Services</a> 
     <a class="nav-item">Contact</a> 
    </ul> 
    </nav> 
</div> 

Answer 1

Als ich bemerkte, können Sie margin:auto; verwenden und von Ihrem HTML können wir sehen, was schief gelaufen ist: Das ist das einsame <ul> tag:

/* Navigation */ 
 
    .navigation { 
 
    background: #fff; 
 
    width:100%; 
 
    height: 156px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5); 
 
    /* demo purpose : flex-wrap:wrap or min-width */ 
 
    min-width:1000px; 
 
    } 
 
    .nav-item { 
 
    text-decoration: none !important; 
 
    font-size: 35px; 
 
    text-transform: uppercase; 
 
    transition: 0.3s color; 
 
    padding: 20px; 
 
    } 
 
    .nav-item, 
 
    .brand { 
 
    margin: auto 0; 
 
    } 
 
    .brand { 
 
    font-size: 50px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    } 
 
    .orange { 
 
    color: orange; 
 
    }

<!-- Header --> 
 
<div class="container"> 
 
    <nav class="navigation"> 
 
    <a class="nav-item">Home</a> 
 
    <a class="nav-item">About</a> 
 
    <a class="brand"><i class="orange">Spencer</i> Hiltbrand</a> 
 
    <a class="nav-item">Services</a> 
 
    <a class="nav-item">Contact</a> 
 
    </nav> 
 
</div>

Answer 2

Scheint, wie die Antwort hat wurde bereits in einem anderen Beitrag gegeben. Vertically centering text inside flexbox

#first { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

#second { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Hier ist ein jsfiddle in der Post gegeben.

Answer 3

Sie brauchen nicht so viel Code - dies ausreichend ist:

http://jsfiddle.net/zfg2sg9L/1/

<div id="container"> 
    <div class="x"> 
     first box 
    </div> 
    <div class="x"> 
     second box 
    </div> 
    <img src="http://placehold.it/100x80"> 
    <div class="x"> 
     third box 
    </div> 
    <div class="x"> 
     fourth box 
    </div> 
</div> 

CSS:

#container { 
    display: flex; 
    justify-content: center; 
} 
.x { 
    margin: auto 20px; 
} 

Der Behälter wird justify-content: center horzontally das Ganze zu zentrieren. Die Flex-Elemente erhalten margin: auto 20px;: Die für oberen und unteren Rand, um sie vertikal zu zentrieren, die 20px links und rechts, um einen Abstand zwischen den Elementen zu schaffen. Das ist alles, was es wirklich braucht.