html - 如何使用 Bootstrap 将 div 的内容居中

Question

我是 Bootstrap 的新手，正在了解它。我试图将下拉菜单放置在页面的中央，我设法将切换菜单的链接居中，但此菜单显示不正确。

这是我尝试过的:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <div class="dropdown">
        <a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
          </li>
        </ul>
      </div>
    <!-- /div.dropdown -->
    </div>
    <!-- /div.col-md-4 .col-md-offset-4 -->
  </div>
  <!-- /div.row -->
</div>
<!-- /div.container -->

显然链接是中心的，因为我正在使用 .text-center 作为包含所有内容的 div，我尝试使用类 center-block 但它没有帮助。有什么提示吗？

Answer 1

dropdown 是一个 block 元素，用 text-align:center 对齐它对 block 元素不起作用。尝试在下拉 div 上添加 display: inline-block。查看 jsfiddle 前。 http://jsfiddle.net/kuyabiye/KLH8S/

<style>
    .dropdown-center {
       text-align: center;

    }

    .dropdown-center .dropdown {
        display: inline-block;
    }
</style>


<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 dropdown-center">
      <div class="dropdown">
        <a id ="dLabel" data-toggle="dropdown" href="#">Despliega menú<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.google.com" target="_blank">Google</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.facebook.com" target="_blank">Facebook</a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="www.stackoverflow.com" target="_blank">Stack Overflow</a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#" target="_blank">Mi Web</a>
          </li>
        </ul>
      </div>
    <!-- /div.dropdown -->
    </div>
    <!-- /div.col-md-4 .col-md-offset-4 -->
  </div>
  <!-- /div.row -->
</div>
<!-- /div.container -->