Arama çubuğu merkezini sayfanın üst kısmına nasıl taşıyabilirsiniz?

Question

Bir arama çubuğunu sayfanın ortasından aynı sayfanın üstüne taşımak istiyorum, aksi takdirde Google arama gibi bir sonraki sayfa. İyi bir öneriye ihtiyacım var lütfen bana yardımcı olun.

Bu benim arama çubuğu kodu:

<div class="big-search-box"> 
    <form role="form" class=""> 
     <div class="input-group"> 
      <input type="text" placeholder="Input your search query..." class="form-control nrb input-lg"> 
      <div class="input-group-btn"> 
       <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-iconed btn-lg" type="button"> 
        <i class="fa fa-file-text-alt"></i> <span>Search</span> 
       </button> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

Size yardımcı, bize yardımcı olmak için bazı kod sağlamalıdır. Okunur this

Css konumlandırma işlemi hile yapmalı ve kodumuz olmadığından sizi bu web sitesine yönlendirelim article Çevrimiçi buldum.

Örnek:

div.relative { 
position: relative; 
left: 30px; 
border: 3px solid #73AD21;} 

Düzenleme: teşekkürler kodunu eklemek için, bu Kendi ihtiyaçlarını uygun için ne css yukarıdaki parça değiştirebilir hile

.big-search-box { 
position: relative; 
width: 50%; 
left: 25%; 
top: 350px; 
} 

yapmalıdır.

Answer 2

zaman ana sayfada bu şekilde görünecektir:

width: 50%; //centered in the middle of the page 
left: 25%; 
top: 500px; 
position: absolute; 

Ve (google gibi) arama sonucu sayfasını girdiğinizde o zaman şu şekilde görünecektir:

width: 50%; //moved to upper left corner (like google) 
left: 1%; 
top: 5px; 
position: absolute;