居中文本和文本框

Question

CSS：

body{ 
     width: 100%; 
     color: black; 
     margin: 0px 0px 0px 0px; 
    } 
    header .top-bar{ 
     width: 100%; 
     background-color: #f2f2f2; 
     height: 35px; 
     border-top: 4px solid #1ce5d9; 
     border-bottom: 1px solid #e7e7e7; 
     vertical-align: middle; 
     color: gray; 
    } 

    header .top-bar .top-bar-left{ 
     float: left; 
    } 

    header .top-bar .top-bar-right{ 
     float: right; 
     vertical-align:top; 
    } 

    header .top-bar li{ 
     display: inline; 
     text-decoration: none; 
    } 

    header .top-bar .active{ 
     text-decoration: none; 
     color: #1ce5d9; 
     text-transform: uppercase; 
     font-size: 140%; 
    } 

    header .top-bar .active:hover{ 
     text-decoration: none; 
     color: #1ce5d9; 
     text-transform: uppercase; 
    } 

HTML：

  <header> 
       <div class="top-line"></div> 
       <div class="top-bar"> 
        <div class="top-bar-left"> 
         <ul> 
          <li><a href="#" class="active">TRENDING</a></li> 
          <li>Some Random Text</li> 
         </ul> 
        </div> 

        <div class="top-bar-right"> 
         <input type="text" class="search-box"> 
        </div> 
       </div> 
       <nav> 
        <div class="logo"> 
         <img src="img/logo.png"> 
        </div> 

        <div class="nav-bar"> 
         <ul> 
          <li class="active"><a href="">Home</a></li> 
          <li><a href="">Features</a></li> 
          <li><a href="">Shop</a></li> 
          <li><a href="">Forums</a></li> 
         </ul> 
        </div> 
       </nav> 
      </header> 

我有我想要的文本和文本框是在水平的div中間的問題。我已經厭倦了在谷歌上看，但我找不到任何工作...

任何幫助，將不勝感激！謝謝！

Answer 1

起初，textli標記是在另一個div內。所以你不能將它與文本框一起居中。

所以它們組合在一起在同一div像這樣：

<div class="top-bar-right"> 
       <li>Some Random Text</li> 
       <input type="text" class="search-box"> 
</div> 

後，如果您刪除float: right存在於top-bar-right它會對準中心。

Answer 2

只要刪除類'頂部欄左'，併爲您的div和margin-left和margin-right添加一個寬度爲auto。

像這樣：style =「width：300px; margin：10px auto;」