如何在下拉菜单中居中对齐按钮？

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>