How to vertically align icons on the navigation bar?

Question

I am trying to vertically align icons on the navigation bar and I try to use this approach:

.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

This is my code:

HTML

<div class="navbar">
  <nav>
    <ul>
      <% if logged_in? %>
        <li><%= link_to "IOAKA", dashboard_path %></li>
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :class => "icon", :id => "ioaka_icon2"), dashboard_path) %></li>
        <li><%= link_to(image_tag("icon_settings.png", alt: "geometry settings icon", 
        :class => "icon", :id => "settings_icon"), edit_user_path(current_user)) %></li>
        <li><%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon", 
        :class => "icon", :id => "logout_icon"), logout_path, method: "delete") %></li>
      <% else %>
        <li><%= link_to "IOAKA", root_path %></li>
        <li><%= link_to(image_tag("icon_login.png", alt: "geometry login icon", 
        :class => "icon", :id => "login_icon"), login_path) %></li>
        <li><%= link_to(image_tag("icon_signup.png", alt: "geometry signup icon", 
        :class => "icon", :id => "signup_icon"), signup_path) %></li>
        <li><%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
        :class => "icon", :id => "ioaka_icon1"), root_path) %></li>
      <% end %>
    </ul>
  </nav>
</div>

CSS

/*--------------------------------HEADER--------------------------------------*/

ul {
  list-style-type: none; /* Removes the bullets. A navigation bar does not need list markers */
  margin: 0; /* to remove browser default settings */
  padding: 0; /* to remove browser default settings */
  text-align: left; /* solves the behavior of center because of body tag text-align center */
}


li {
  display: inline; /* By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line */
}

a:link {
  text-decoration: none; /* unvisited link remove default undline */
}

a:active {
  color: black;  /* selected link remove default red color */
}

.icon {
  float: right; /* use float to get block elements to slide next to each other */
}

#ioaka_icon1 {
  height: 50px;
}

#signup_icon {
  height: 44px;
}

#login_icon {
  height: 50px;
}

.navbar {
  max-width: 100%;
  height: 65px;
  line-height: 65px; /* Aligns text vertically to the div the value has to be the same as the div! */
  background-color: white;
  border-bottom: #cfcfcf 3px solid;
}

If I use in this case:

.nav ul {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

It seems that the elements only are going 50% to the top (transform: translateY(-50%);) and the top: 50%; does not make any change?

Question: What am I missing and why is it not working? Thanks in advance!

I think, easiest solution to `.icon` class apply `padding` with desired values — Igor Ivancha, Jan 09 '16 at 17:36
to apply `top`, `left` etc. you would have to set `position: absolute;` — guysigner, Jan 09 '16 at 17:49
@remdevtec it could be used with `position:relative` too sometimes, as in the second part of my answer — Mi-Creativity, Jan 09 '16 at 19:53

score 5 · Accepted Answer · edited May 23 '17 at 11:46

Here are two methods to vertically align the nav items in the nav section.

HTML (same for both examples)

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>

DEMO 0: Starting Point

Method 1: Flexbox

CSS

nav {
    display: flex;             /* establish flex container */
    align-items: center;       /* center ul container vertically */
    justify-content: center;   /* center ul container horizontally (optional) */
}

DEMO 1

Method 2: Absolute Positioning

nav {
    position: relative;  /* establish containing block (nearest positioned ancestor) for
                            absolute positioning */
}

ul {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

DEMO 2a

If you want to center the nav items both vertically and horizontally, make this adjustment:

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; /* center nav items inside nav container */
    width: 75%;         /* to prevent overflow of nav items for demo */
}

DEMO 2b

For a third method, involving table properties, see my answer here: https://stackoverflow.com/a/31977476/3597276

To learn more about flexbox visit:

Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Mi-Creativity · Answer 2 · 2016-01-09T19:50:15.797

Using top: 50%; isn't correct because even though it selects half of the vertical but it is ignores the height of the .element itself, so we can solve this by:

Calculating it manually -only when you know the value of height:

JS Fiddle 1

#element-container {
  width: 100%;
  height: 150px;
  background-color: orange;
  text-align: center;
}
.element {
  width: 50px;
  height: 50px;
  background-color: green;
  display: inline-block;
  margin-right: 20px;
  /* here we set margin-top manually, so 15px container height - (50px margin-top +
     50px element height) leaves us with bottom space of 50px, vertically aligned!
  */
  margin-top: 50px;
}

<div id="element-container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Making use of CSS function .calc() ^(*), this method is similar to your approach and it is so useful in cases where you have varying height or undetermined height -same for width too- use it like this

JS Fiddle 2

#element-container {
  width: 100%;
  height: 150px;
  background-color: orange;
  text-align: center;
}
.element {
  width: 50px;
  height: 50px;
  background-color: green;
  display: inline-block;
  margin-right: 20px;
  position: relative;
  /* 50% of vertical distance - 25px (half of the .element height) will vertically align it */
  top: calc(50% - 25px);
}

<div id="element-container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

------------------------------------------------------------------------------

^(*) Resources:

How to vertically align icons on the navigation bar?

2 Answers2

------------------------------------------------------------------------------