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

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概述的子div而不是子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>