Question

我已尽力而为但遗憾的是我无法将文本中心1和2元素放在导航栏的中间位置。希望你能帮助我。感谢。

＆＃13;

<div class="navbar navbar-default navbar-bottom" role="navigation">
  <div class="container">
    <div class="navbar-text pull-left">
      <p>Left</p>
    </div>
    <div class="navbar-text ???">
      <a href="#"><i>Text Center 1</i></a>
      <a href="#"><i>Text Center 2</i></a>
    </div>
    <div class="navbar-text pull-right">
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
    </div>
  </div>
</div>

＆＃13;

Answer 1

Bootstrap有一个预定义的居中文本类text-center，可以添加到任何元素/ div。

示例：<div class="navbar-text text-center">

在此处查看所有引导程对齐类：http://getbootstrap.com/css/#type-alignment

Answer 2

只需提供您想要将text-align:CENTER;属性居中的div。

有时使用纯CSS而不是Bootstrap更容易。

＆＃13;

div.center{
  text-align:CENTER;  
}

＆＃13;

<div class="navbar navbar-default navbar-bottom" role="navigation">
  <div class="container">
	<div class="navbar-text pull-left">
      <p>Left</p>
	</div>
	<div class="navbar-text center">
	  <a href="#"><i>Text Center 1</i></a>
	  <a href="#"><i>Text Center 2</i></a>
	</div>
	<div class="navbar-text pull-right">
	  <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
	  <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
	</div>
  </div>
</div>

＆＃13;

Answer 3

类text-center只有在屏幕大小小于768px时才会帮助您居中Text Center链接（但在这种情况下社交链接会下降！），如果屏幕大小超过768px，则引导程序类navbar-text有属性float: left，您的链接将位于导航栏的左侧。要防止其行为，您需要为中间导航栏应用float: none和display: inline-block属性：

<div class="navbar navbar-default navbar-bottom" role="navigation">
  <div class="container text-center">
    <div class="navbar-text pull-left">
      <p>Left</p>
    </div>
    <div class="navbar-text myClass">
      <a href="#"><i>Text Center 1</i></a>
      <a href="#"><i>Text Center 2</i></a>
    </div>
    <div class="navbar-text pull-right">
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
    </div>
  </div>
</div>

.myClass {
  float: none;
  display: inline-block;
}

在这种情况下，

类text-center用于div.container

JSFiddle-example

如何在Bootstrap导航栏中居中项目

3 个答案: