Spencer Hiltbrand Spencer Hiltbrand - 6 months ago 11
HTML Question

Center Text Vertically with Flexbox, not creating result I want

I need help with this, I'm not quite sure how to explain my problem in words, so here is a picture. this is what it looks like

this is what I want it to look like (from another website) Not style an all, just the centering style.

I want my links to be centered like this:
HOME ABOUT SPENCER HILTBRAND SERVICES CONTACT

Heres my 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 structure:

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

As i commented, you may use margin:auto; and from your HTML we can see what went wrong: this is that lonely <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>