使导航栏图标文本居中-使用Bootstrap的Rails应用

Question

I have a 4.x Rails app using Bootstrap. 我有一个使用Bootstrap的4.x Rails应用程序。 The navbar has Font Awesome icons in it. 导航栏中有Font Awesome图标。 When you hover over an icon, a  with one word of text appears below the icon. 当您将鼠标悬停在图标上时，带有一个文本单词的出现在图标下方。

The problem I am having is getting this one word of text to be centered horizontally below the icon. 我遇到的问题是使这一个单词在图标下方水平居中 。 Right now the icon is stacked above the text, as it should be; 现在，图标应按原样堆叠在文本上方。 however, the text is aligned to the left, not aligned with the horizontal center of the icon. 但是，文本向左对齐，而不与图标的水平中心对齐。

Here is my HTML: 这是我的HTML：

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li id="nav-microphone"><%= link_to '#', class: "col-xs-offset-1 col-xs-2" do %>
      <i class="fa fa-microphone fa-3x"></i><br>
      <span class="nav-icon-text">mute</span>
      <% end %>
    </li>
    <li id="nav-video"><%= link_to '#', class: "col-xs-offset-1 col-xs-2" do %>
      <i class="fa fa-video-camera fa-3x"></i><br>
      <span class="nav-icon-text">off</span>
      <% end %>
    </li>
    <li id="nav-exit"><%= link_to '#', class: "col-xs-offset-1 col-xs-2" do %>
      <i class="fa fa-sign-out fa-3x"></i><br> 
      <span class="nav-icon-text">hangup</span>
      <% end %>
    </li>
    <li id="nav-settings"><%= link_to '#', class: "col-xs-offset-1 col-xs-2" do %>
      <i class="fa fa-cog fa-3x"></i><br> 
      <span class="nav-icon-text">settings</span>
      <% end %>
    </li>
  </ul>
</div>

Here is my associated CSS: 这是我关联的CSS：

.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: none;
}

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

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

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

.nav > li > a {
  padding: 10px 22px;
}

.nav > li {
  padding-top: 10px;
  min-height: 99px;
  min-width: 95px;
  text-align: center;
}

How can I get each  to be centered horizontally below its associated icon? 如何使每个 在其关联图标下方水平居中 ？ Thanks! 谢谢！

Answer 1

HPJAJ , Hi there. HPJAJ ，您好。 Try using line-height: XXpx; 尝试使用line-height: XXpx; and make the this value the same px height as your icon. 并将此值设置为与图标相同的px高度。 This is a easy way to get your text in the middle vertically. 这是一种使文本垂直居中的简单方法。 I also think the  may have some padding-top too, so keep this in mind. 我也认为可能也有一些padding-top ，所以请记住这一点。

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. 我把您的代码放上去，发现导航栏中的那些col-xs-1 col-xs-offset-2有问题。
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 . 这是工作中的小提琴 。

在此处输入图片说明

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="//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-icon-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-icon-text { display: block; color:darkorange; } .nav > li > a { padding: 10px 0px; } .nav > li { padding-top: 10px; min-height: 99px; min-width: 95px; text-align: center; } </style> </head> <body> <div class="navbar-collapse collapse navbar-default"> <ul class="nav navbar-nav navbar-right "> <li id="nav-microphone"><a href="#" > <i class="fa fa-microphone fa-3x"></i><br> <span class="nav-icon-text">mute</span> </a> </li> <li id="nav-video"><a href="#" > <i class="fa fa-video-camera fa-3x"></i><br> <span class="nav-icon-text">off</span> </a> </li> <li id="nav-exit"><a href="#" > <i class="fa fa-sign-out fa-3x"></i><br> <span class="nav-icon-text">hangup</span> </a> </li> <li id="nav-settings"><a href="#" > <i class="fa fa-cog fa-3x"></i><br> <span class="nav-icon-text">settings</span> </a> </li> </ul> </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>

使导航栏图标文本居中-使用Bootstrap的Rails应用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-25 03:10:53

使导航栏图标文本居中-使用Bootstrap的Rails应用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-25 03:10:53

解决方案1
1 已采纳 2015-06-25 03:10:53