Центр текста Вертикально с Flexbox, не создавая результат Я хочу

Question

Мне нужна помощь в этом, я не совсем уверен, как объяснить свою проблему словами, так что вот фотография. this is what it looks like

this is what I want it to look like (from another website) Не стиль все, только центрирующий стиль.

Я хочу, чтобы мои ссылки должны быть сосредоточены так: ГЛАВНАЯ О SPENCER HILTBRAND УСЛУГИ КОНТАКТЫ

Heres мой 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 структура:

<!-- 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

Как я заметил, вы можете использовать margin:auto; и от вашего HTML, мы можем увидеть, что пошло не так: это то, что одинокая <ul> тег:

/* 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

Похоже, ответ есть уже переданы в другой должности. Vertically centering text inside flexbox

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

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

Вот jsfiddle приведены в сообщении.

Answer 3

Вам не нужно много кода - это достаточно:

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

Контейнер получает justify-content: center центрировать все это horzontally. Элементы flex получают margin: auto 20px;: auto для верхнего и нижнего полей, чтобы центрировать их по вертикали, 20 пикселей слева и справа, чтобы создать некоторое расстояние между элементами. Это все, что нужно.