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!
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.
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.
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.
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:
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.
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:
http://caniuse.com/#search=calc
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With