如何在下拉菜單中居中對齊按鈕？

Question

我創建了一個下拉菜單。 此菜單內有一個用於登錄的按鈕。但是我無法使其居中對齊。

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown text-center">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
        <button class="btn btn-info"><div class="dropdown-item"  style="width:100px; text-align:center; left:50% margin-left:50px;">Sign In</div></button>
        <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
      </li>
      <li class="divider"></li>
      <li>
        <a href="#"><div class="dropdown-item">ABCDE</div></a>
        <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

您可以添加text-align:center; 給包裝工li 。 文本對齊方式應應用於要居中元素的父級。 您可以刪除div的邊距和左側位置。

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown text-center">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li style="text-align:center;">
                <button class="btn btn-info"><div class="dropdown-item"  style="width:100px;">Sign In</div></button>
                <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#"><div class="dropdown-item">ABCDE</div></a>
                <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
            </li>
        </ul>
    </li>
</ul>

或者，如果只希望按鈕居中，則可以將其設置為塊元素，並使用margin:0 auto; 。 這種風格將需要應用到按鈕上，而不是Gerard概述的child div上。

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown text-center">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <button class="btn btn-info" style="width:100px;display:block;margin:0 auto;"><div class="dropdown-item">Sign In</div></button>
                <h6 class="dropdown-header">New User? <a href="#">Sign up</a></h6>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#"><div class="dropdown-item">ABCDE</div></a>
                <a href="#"><div class="dropdown-item">UVWXYZ</div></a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

您的目標是按鈕的文本，而不是按鈕本身。 請使用以下內容。

 <div class="dropdown-item" style="width:100px; text-align:center; left:50% margin-left:50px;"> <button class="btn btn-info">Sign In</button> </div>