Vertikal und horizontal Bootstrap Row auf Seite

Question

Ich bin ziemlich neu in Front-HTML/CSS und benutze Bootstrap, um meine Seiten Seiten und sieht gut aus und reagiert. Allerdings habe ich eine Seite mit einem Eingabesuchfeld und möchte, dass es auf der Seite zentriert ist. Dies ist, was mein HTML aussieht:

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 60px; 
 
} 
 
/* for search bar */ 
 

 
.stylish-input-group .input-group-addon { 
 
    background: white !important; 
 
} 
 
.stylish-input-group .form-control { 
 
    border-right: 0; 
 
    box-shadow: 0 0 0; 
 
    border-color: #ccc; 
 
} 
 
.stylish-input-group button { 
 
    border: 0; 
 
    background: transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-offset-3"> 
 
     <div id="imaginary_container"> 
 
     <div class="input-group stylish-input-group"> 
 
      <input type="text" class="form-control" placeholder="search" autofocus> 
 
      <span class="input-group-addon"> 
 
      <button type="submit"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Was ich hoffe ist zu tun, um das Suchfeld auf der Seite, ähnlich wie Google die Homepage zu zentrieren. Irgendwelche Ideen, wie ich das erreichen kann? Vielen Dank.

Answer 1

Sie müssen hier wirklich ein Zentrierungskonzept verwenden. Ich habe die transform Methode verwendet.

.container { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Snippet hier:

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    /* Margin bottom by footer height */ 
 
    margin-bottom: 60px; 
 
} 
 
/* for search bar */ 
 

 
.stylish-input-group .input-group-addon { 
 
    background: white !important; 
 
} 
 
.stylish-input-group .form-control { 
 
    border-right: 0; 
 
    box-shadow: 0 0 0; 
 
    border-color: #ccc; 
 
} 
 
.stylish-input-group button { 
 
    border: 0; 
 
    background: transparent; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-sm-offset-3"> 
 
     <div id="imaginary_container"> 
 
     <div class="input-group stylish-input-group"> 
 
      <input type="text" class="form-control" placeholder="search" autofocus> 
 
      <span class="input-group-addon"> 
 
      <button type="submit"> 
 
       <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Centered Form in Twitter Bootstrap:

<style type="text/css"> 
    .center { 
     vertical-align: center; 
    } 
</style 

<div class="row"> 
    <div class="col-xs-4 col-xs-offset-4 center"> 
     <form> 
      <input type="text"> 
     </form> 
    </div> 
</div> 

hoffe, das hilft!

Answer 3

Verwenden Sie einfach flex Layout, um eine Klasse zu Ihrem div hinzufügen:

.search-bar { 
 
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */ 
 
    min-height: 100vh; /* These two lines are counted as one :-)  */ 
 

 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="row search-bar"> 
 
     <div class="col-sm-6 col-sm-offset-3"> 
 
      <div id="imaginary_container"> 
 
      <div class="input-group stylish-input-group"> 
 
       <input type="text" class="form-control" placeholder="search" autofocus> 
 
       <span class="input-group-addon"> 
 
       <button type="submit"> 
 
        <span class="glyphicon glyphicon-search"></span> 
 
       </button> 
 
       </span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Und dann verwenden Sie display:flex und align-items:center für Ihre CSS.

Answer 4

Ich hatte gerade die Flexbox verwenden für vertikale align

#imaginary_container{ 
display: flex; 
flex-direction: column; 
justify-content: center; 
height: 100vh; 

}

Für horizontale Zentrierung Zentrierung können Sie die Bootstrap Klasse .text-Zentrum verwenden, zB:

<div class="input-group text-center stylish-input-group" style=" 
text-align: center;"></div>