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。

<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

您的目标是按钮的文字，而不是按钮本身。请使用以下内容。

＆＃13;

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

＆＃13;

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

2 个答案: