使用引导程序居中元素

Question

我一直在尝试和搜索如何使用 Bootstrap 使元素居中，但似乎找不到方法。第一行容器中心正好使用center block 类。

我发现 HERE 在这种情况下将 .navbar-nav>li 更改为 float:none; 可以解决问题，但对我来说它只是垂直堆叠图标。

提前致谢。

<div class="container" style="height: 30px;"></div>
  <div class="row">
    <div class="col-md-4" style="">
       <a class="brand" href="index.php"> <img style="width: 57%;" class="center-block" src="img/xelha_logo.png" /></a>
    </div>
    <div class="col-md-4" style="background-color:blue;"> <!-- THIS ONE -->
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/facebook_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/twitter_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/youtube_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/tripadvisor_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/faq_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/mexicanflag.png" /></a>
    </div>
    <div class="col-md-4 center-block" style="background-color:green;"> <!-- AND THIS ONE -->
        <!-- Single button -->
        <div class="btn-group" >
          <button type="button" class="btn btn-default btn-lg dropdown-toggle center-block" data-toggle="dropdown">
            Customer Service <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Canc&uacute;n: 998 2 51 65 60</a></li>
            <li><a href="#">Playa del Carmen: 984 1 47 65 60</a></li>
            <li><a href="#">M&eacute;xico: 01 800 21 28 951</a></li>
            <li><a href="#">USA-CAN: 188 892 27 381</a></li>
            <li><a href="#">Argentina: 0 800 666 15 26</a></li>
            <li><a href="#">Colombia: 01 800 931 67 45</a></li>
          </ul>
        </div>
    </div>
</div>

Answer 1

将您的代码更改为此并尝试：-

<div class="container" >


<div class="row">
<div class="col-md-3">

</div>
<div class="col-md-2" >
<a class="brand" href="index.php"> <img style="width: 57%;" src="img/xelha_logo.png" /></a>
</div>
 <div class="col-md-2" style="background-color:blue;">
<a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/facebook_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/twitter_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/youtube_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/tripadvisor_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/faq_logo.png" /></a>
        <a class="brand" href="#"> <img style="width: 10%;" class="" src="img/social/mexicanflag.png" /></a>
</div>


<div class="col-md-2" style="background-color:green;">

      <div class="btn-group" >
          <button type="button" class="btn btn-default btn-lg dropdown-toggle center-block" data-toggle="dropdown">
            Customer Service <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Canc&uacute;n: 998 2 51 65 60</a></li>
            <li><a href="#">Playa del Carmen: 984 1 47 65 60</a></li>
            <li><a href="#">M&eacute;xico: 01 800 21 28 951</a></li>
            <li><a href="#">USA-CAN: 188 892 27 381</a></li>
            <li><a href="#">Argentina: 0 800 666 15 26</a></li>
            <li><a href="#">Colombia: 01 800 931 67 45</a></li>
          </ul>
        </div>
</div>
<div class="col-md-3" >
</div>
</div>