Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to vertically align icons on the navigation bar?

Tags:

html

css

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!

like image 795
trickydiddy Avatar asked Jan 09 '16 17:01

trickydiddy


People also ask

How do I align vertical icons?

If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.

How do I align NAV to center vertically?

Add text-align:center to <li> or <a> to center the links. Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one: Home.

How do I center a logo in a navigation bar?

So, in order to resolve this problem, we have assigned the display property of the image tag to “block” and then assign proper width and height to it. Assign the margin to “auto”. You will see that the logo image is now centered in the navigation bar.


2 Answers

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.

like image 50
Michael Benjamin Avatar answered Nov 04 '22 12:11

Michael Benjamin


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:

  1. 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>

  1. 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:

  • http://caniuse.com/#search=calc

  • https://developer.mozilla.org/en-US/docs/Web/CSS/calc

like image 24
Mi-Creativity Avatar answered Nov 04 '22 10:11

Mi-Creativity