如何在Bootstrap模式中居中對齊左對齊列表

Question

我非常喜歡HTML / CSS初學者，所以我遇到以下問題：此Bootstrap模式中的列表項（帶圖標）相對於彼此正確左對齊。 但是，我希望整個列表出現在模態的中心。

要使列表項正確對齊，我在CSS中有這個：

.modal-list > li > a {
  color:#333;
  text-decoration: none;
  list-style: none;
  display: block;
  text-align: left;
}  

這是（我認為）相關的HTML：

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Sign up or log in using OpenID</h4>
      </div>
      <div class="modal-body">
        At this time, CloudSim is in beta and by invitation only. If you have received an invite, pick a login option below.
        <!--OpenID options -->
        <ul class="dropdown-menu-modal" style="list-style-type:none;">
            <li>
              <a href="/auth/google"><img class="inline-block"
                 alt="Google" width="46" src="/img/icons/google.svg"/> Google</a>
            </li>
            <li>
              <a href="/auth/yahoo"><img class="inline-block"
                 alt="Yahoo" width="46" src="/img/icons/yahoo.svg"> Yahoo</a>
            </li>
            <li>
              <a href="/auth/aol"><img class="inline-block"
                 alt="AOL" width="46" src="/img/icons/aol.svg"> AOL</a>
            </li>
            <li>
              <a href="/auth/openid"><img class="inline-block"
                 alt="OpenId" width="46" src="/img/icons/openid.svg"> OpenId</a>
            </li>
          </ul>
        <!-- end here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!-- end of modal -->

我沒有足夠的“聲譽”來發布圖片，所以這里有一個鏈接到它當前的樣子： http ： //imgur.com/c7mrjfV

Answer 1

您可以給出100％的寬度，然后將文本與中心對齊。

這將是響應式的，因此您無需擔心添加特定寬度。

嘗試添加這兩行CSS

.modal-list > li > a {
  color:#333;
  text-decoration: none;
  list-style: none;
  display: block;
  text-align: left;

  width: 100%;
  text-align: center;
}