HTML/CSS: Middle Vertical Align

Question

Hi I'm trying to middle vertical align my site's logo with my navigation link list. I've tried adding "vertical-align: middle" to my div columns, but nothing happens. Right now my logo and my navigations look kinda weird and is just floating around. Any help on this would be great.

HTML:

   <div class="sixteen columns clearfix">
    <div class="five columns">
      <a href="{{ shop.url }}" title="{{ shop.name }}">
      {% if settings.use_logo %}
        <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" />
      {% else %}
        {{ shop.name }}
      {% endif %}
    </a>
      </div>
    <div class="eleven columns">
    <div id="mobile_nav"></div>
    <div id="nav">
      <ul id="menu">
        {% for link in linklists[settings.main_linklist].links %}
          {% if linklists[link.handle] == empty %}
            <li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %}>{{ link.title }}</a></li>
          {% else %}
            <li><a href="{{ link.url }}" title="{{ link.title }}" {% if link.active %}class="active"{% endif %} {% for link in linklists[link.handle].links %}{% if link.active %}class="active"{% endif %}{% endfor %}>{{ link.title }} 
              <span class="arrow">&or;</span></a> 
              <ul>
                {% for link in linklists[link.handle].links %}
                  {% if linklists[link.handle] == empty %}
                    <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
                  {% else %}
                  <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }} <span class="arrow"> &gt;</span></a> 
                    <ul>
                      {% for link in linklists[link.handle].links %}                        
                        <li><a href="{{ link.url }}" title="{{ link.title }}">{{ link.title }}</a></li>
                      {% endfor %}
                    </ul>
                  </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
     </div>
  </div>

Column CSS:

  .column, .columns { 
float: left; 
display: inline; 
margin-left: 10px; 
margin-right: 10px;
vertical-align: middle;
}

Here's how it currently looks like:

Need to move it to the middle:

Answer 1

1. Specify the parent container as position: relative or position: absolute .
2. Specify a fixed height on the child container.
3. Set position: absolute and top: 50% on the child container to move the top down to the middle of the parent.
4. Set margin-top: -yy where yy is half the height of the child container to offset the item up.

( http://phrogz.net/CSS/vertical-align/ )

• Either relatively position .columns ( position: relative ) or absolutely position it ( position: absolute )
• Give .column a height value
• Absolutely position .column ( position: absolute ) , and give it top: 50%
• Give .column a top margin of the negative of half its height value ( margin-top: -yy where yy is half of the height of .column )

Answer 2

As you have already used vertical-align: middle in class; so by just adding display: table-cell property your problem must solved.

Note: There are many ways to align content or div vertically.. using line-height (condition is only apply for first line), padding-top , table-cell and giving absolute position.