title: How to vertically align icons on the navigation bar?
body: <p>I am trying to vertically align icons on the navigation bar and I try to use this approach:</p>
  
  <pre><code>.element {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
  }
  </code></pre>
  
  <p>This is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="navbar"&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;% if logged_in? %&gt;
          &lt;li&gt;&lt;%= link_to "IOAKA", dashboard_path %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
          :class =&gt; "icon", :id =&gt; "ioaka_icon2"), dashboard_path) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_settings.png", alt: "geometry settings icon", 
          :class =&gt; "icon", :id =&gt; "settings_icon"), edit_user_path(current_user)) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_logout.png", alt: "geometry logout icon", 
          :class =&gt; "icon", :id =&gt; "logout_icon"), logout_path, method: "delete") %&gt;&lt;/li&gt;
        &lt;% else %&gt;
          &lt;li&gt;&lt;%= link_to "IOAKA", root_path %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_login.png", alt: "geometry login icon", 
          :class =&gt; "icon", :id =&gt; "login_icon"), login_path) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_signup.png", alt: "geometry signup icon", 
          :class =&gt; "icon", :id =&gt; "signup_icon"), signup_path) %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to(image_tag("icon_ioaka.png", alt: "geometry IOAKA icon", 
          :class =&gt; "icon", :id =&gt; "ioaka_icon1"), root_path) %&gt;&lt;/li&gt;
        &lt;% end %&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*--------------------------------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, &lt;li&gt; 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;
  }
  </code></pre>
  
  <p><strong>If I use in this case:</strong></p>
  
  <pre><code>.nav ul {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  </code></pre>
  
  <p>It seems that the elements only are going <code>50%</code> to the top (<code>transform: translateY(-50%);</code>) and the <code>top: 50%</code>; does not make any change?</p>
  
  <p><strong>Question:</strong> What am I missing and why is it not working? Thanks in advance!</p>