Vertical centering in css

Question

I am trying to vertically center some text contained within divs within another div. For the life of me I cannot get it to work.

Here is a JSfiddle for the code. I want the two pieces of text to be vertically centered between the top of the page and the bottom of the div which is the bottom border.

     .logo1 {
       font-family: Helvetica;
       font-size: 36px;
       letter-spacing: -0.05em;
       text-align: left;
       display: inline-block;
       width: 525px;
     }
     .orange {
       color: #e68217;
       font-weight: bold;
     }
     .nav {
       color: black;
       font-family: Helvetica;
       font-size: 18px;
       font-weight: bold;
       letter-spacing: -0.05em;
       text-align: right;
       width: 300px;
       display: inline-block;
     }
     div.head {
       margin: auto;
       width: 850px;
       height: 100px;
       border-bottom: 3px solid #cccccc;
     }

<div class="head">
  <div class="logo1">
    foo<span class="orange">bar</span>
  </div>

  <div class="nav">
    <a href="#">portfolio</a>
    <span style="color: #cccccc">|</span>
    <a href="#">about me</a>
    <span style="color: #cccccc">|</span>
    <a href="#">contact me</a>
  </div>
</div>

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — apaul, Jan 08 '16 at 02:46
Do you want to align `logo1` and `nav` vertically and align both in same direction? — Maihan Nijat, Jan 08 '16 at 02:49
Could you please be a little more specific? ids, classes, and/or the actual text that needs centering? — zer00ne, Jan 08 '16 at 02:51
I am trying to put the text in the middle of the div that it is contained in. If you look at the jsfiddle you can see there is a bottom border on the div and the top is at the top of the document. I want the text to be in the middle of that space. To be more specific: I want the "logo1" and "nav" divs to be in the middle of the space between the top of the page and the bottom border. — shoes, Jan 08 '16 at 02:52
Which text? **All your elements are texts!** Are you trying to position `.logo1` at the middle` of `.head` vertically? — tao, Jan 08 '16 at 02:53

score 0 · Accepted Answer · answered Jan 08 '16 at 02:56

Use the following CSS code:

.nav {
    color: black;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: bold; 
    letter-spacing: -0.05em;
    text-align: right;
    display: inline-block;
    vertical-align:middle;
    width: 300px;
    padding-top:38px;
}

Vertical centering in css

1 Answers1