Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Ruby On Rails / Twitter Bootstrap

Centering Navbar Icon Text - Rails App Using Bootstrap

Post a Comment
I have a 4.x Rails app using Bootstrap. The navbar has Font Awesome icons in it. When you hover over an icon, a with one word of text appears below the icon. The pro

Solution 1:

HPJAJ, Hi there. Try using line-height: XXpx; and make the this value the same px height as your icon. This is a easy way to get your text in the middle vertically. I also think the<span> may have some padding-top too, so keep this in mind.

Added to post

Roger that, you meant horizontally.

I put your code up and found that you have an issue with having those col-xs-1 col-xs-offset-2 in the navbar. For this demo, I turned on the parts you were not displaying. Like the text and the icons.

Removing the classes showed that your text was centered.

As you will see in this code below.

Here is a working Fiddle.

enter image description here

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><linkhref="../../fav.ico"><title>Starter Template for Bootstrap</title><!-- Bootstrap core CSS --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><linkhref="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><style>.navbar {
  min-height: 80px;
  border-radius: 0;  
}

.navbar-default {
  background-color: #98172c;
  border-color: #98172c;
}

.fa {
  color: white;
}

.mojo-logo {
  max-height: 60px;
}

#nav-microphone, #nav-video, #nav-exit {
  display: block;
}

.navbar-nav > li > a {
  padding-bottom: 20px;
}

.nav--text {
  display: block;
  color: white;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Garamond Pro;
}

.navbar-nav > li > a:hover.nav--text {
  display: block;
  color:darkorange;    
}

.nav > li > a {
  padding: 10px0px;
  
}

.nav > li {
  padding-top: 10px;
  min-height: 99px;
  min-width: 95px;
  text-align: center;
}    
    
</style></head><body><divclass="navbar-collapse collapse navbar-default"><ulclass="nav navbar-nav navbar-right "><liid="nav-microphone"><ahref="#" ><iclass="fa fa-microphone fa-3x"></i><br><spanclass="nav--text">mute</span></a></li><liid="nav-video"><ahref="#" ><iclass="fa fa-video-camera fa-3x"></i><br><spanclass="nav--text">off</span></a></li><liid="nav-exit"><ahref="#" ><iclass="fa fa-sign-out fa-3x"></i><br><spanclass="nav--text">hangup</span></a></li><liid="nav-settings"><ahref="#" ><iclass="fa fa-cog fa-3x"></i><br><spanclass="nav--text">settings</span></a></li></ul></div><!-- Bootstrap core JavaScript
    ================================================== --><!-- Placed at the end of the document so the pages load faster --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></body></html>

Post a Comment for "Centering Navbar Icon Text - Rails App Using Bootstrap"