NavbarのBootstrapボタンを中央に置きます。

Question

NavbarにあるLoginというボタンがありますが、それは上部近くに配置されており、Navbarの中央に配置したいと思っています。ユーザーがログインすると、上部にも[ログアウト]というボタンがありますので、このソリューションを使用してこの問題を解決できることを願っています。これは私のヘッダーのための私のコードです：

<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>