如何在Bootstrap模态框中使左对齐列表居中对齐

Question

如何在Bootstrap模态框中使左对齐列表居中对齐

4

我是一名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

- user3452700

你能否添加你的HTML代码？ - James

已添加！如果有遗漏的地方，请告诉我 :) - user3452700

可以尝试为ul添加特定的宽度，并像这样使用margin auto：.dropdown-menu-modal{width:100px;margin:0 auto;} - James

哦，这确实有效，谢谢！你认为这会影响在小设备上的布局响应性吗？ - user3452700

由于宽度仅为100px，我认为它不会在较小的设备上出现问题。 - James

非常感谢您的帮助。 - user3452700

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alexcowles · Answer 1

您可以将a元素的宽度设置为100％，然后将文本居中对齐。

这将是响应式的，因此您无需担心添加特定的宽度。

尝试添加以下两行CSS。

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

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