CODEWITHSUNDEEP
htmlcss
Spencer Hiltbrand
Spencer Hiltbrand

Reputation: 11

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>

Upvotes: 0

Views: 40

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105933

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>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

You don't need that much code - this is sufficient:

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

The container gets justify-content: center to center the whole thing horzontally. The flex items get margin: auto 20px;: The auto for top and bottom margin to center them vertically, the 20px left and right to create some distance between the items. That's all it really needs.

Upvotes: 0

Vartan Arabyan
Vartan Arabyan

Reputation: 3073

Seems like the answer has already been given in another post. Vertically centering text inside flexbox

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

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

Here is a jsfiddle given in the post.

Upvotes: 0

Related Questions