html - 在导航栏中居中 Bootstrap 按钮

Question

我在导航栏中有一个名为“登录”的按钮，但它位于顶部附近，我希望将其置于导航栏的中央。当用户登录时，顶部附近还有一个名为注销的按钮，因此我希望我可以使用您的解决方案来解决此问题。这是我的标题代码:

<header>
    <nav class="navbar navbar-default navbar-static-top">
        <div class=container>
            <div class=navbar-header>
                <button type=button class="navbar-toggle collapsed" data-toggle=collapse data-target=#navbar aria-expanded=false aria-controls=navbar>
                    <span class=sr-only>Toggle navigation</span>
                    <span class=icon-bar></span>
                    <span class=icon-bar></span>
                    <span class=icon-bar></span>
                </button>
                <!-- <a class=navbar-brand href=<?= site_url() ?>><?= $this->config->item('app_name')?></a> -->
                <a class=navbar-brand href=<?= site_url() ?>><img src="<?php echo site_url(); ?>resources/imgs/logo.png" height="30"></a>
            </div>
            <div id=navbar class="collapse navbar-collapse">
                <?php if(!isset($_SESSION['user_login'])): ?>
                    <div class="navbar-form navbar-right">
                        <a href=<?= site_url() ?>login class="btn btn-warning"><span class="glyphicon glyphicon-user"></span> Login</a>
                    </div>
                <?php else: ?>
                    <div class="navbar-form navbar-right">
                        <a href=<?= site_url() ?>logout class="btn btn-warning"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
                    </div>
                <?php endif ?>
                <ul class="nav navbar-nav navbar-right">
                    <li class=<?= $sell_active ?>><a href=<?= site_url() ?>sell><span class="glyphicon glyphicon-tag"></span> Sell</a></li>
                    <?php if(isset($_SESSION['user_login'])): ?>
                        <li class=<?= $myorders_active ?>>
                            <a href=<?= site_url() ?>myorders><span class="glyphicon glyphicon-shopping-cart"></span> My Orders</a>
                        </li>
                    <?php else: ?>
                        <li class=<?= $track_active ?>>
                            <a href=<?= site_url() ?>track><span class="glyphicon glyphicon-globe"></span> Order Status</a>
                        </li>
                    <?php endif ?>
                    <?php if (isset($_SESSION['user_login'])): ?>
                    <?php else: ?>
                        <li class=<?= $register_active ?>>
                            <a href=<?= site_url() ?>register><span class="glyphicon glyphicon-pencil"></span> Register</a>
                        </li>
                    <?php endif ?>
                </ul>
            </div>
        </div>
    </nav>
</header>

Answer 1

您是否正在锁定类似的东西？

div {
  width: 100%;
  height: 40px;
  background: lightgray;
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);

}

<div>
  <button>
    Login
  </button>
</div>