> Faqs > Alinear una barra de búsqueda al centro

Alinear una barra de búsqueda al centro

Hola chicos! en esta ocasión estoy poniendo la barra de búsqueda y uhm, estoy probando con cada elemento que he estado buscando en internet (alinear-elementos, justificar-contenido…) pero no puedo poner la barra de búsqueda en el medio; ¿Alguien puede echarme una mano sobre esto y explicarme por qué no funciona?

** EL CÓDIGO HTML**

<div class="barrabusqueda">
	<form class="formulariodebarra" action="#" method="POST">

			<div class="inputdebarra">
				<input class="" type="search" placeholder="">
			</div>
			<div>
				<input class="botonclick" type="submit" value="Buscar con Google"/>
				<input class="botonclick" type="submit" value="Me siento con suerte"/>
			</div>
				
			</div>
	
			</div>

	</form>

		</div>

EL CÓDIGO CSS

.barrabusqueda{
    padding: 10 40px 10 25px;
    position: center;
    margin: 0 auto;
    padding-top: 6px;
    height: 600px;
    align-content: center;
    align-items: center;
}
.barrabusqueda, .formulariodebarra, {
width: 200px ;
height: 50px;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
justify-content: center
}

.formulariodebarra{
    overflow: hidden;
	position: relative;
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Hola!!

No queda perfectamente claro cómo la quieres mostrar esa barra de búsqueda. Dices "al medio", pero ¿al medio de qué?

¿Te refieres en la horizontal o en la vertical? ¿O quieres alinear tanto en la horizontal como en la vertical? ¿O es simplemente al medio de un contenedor en específico?

Yo te voy a dar una solución para alinear al medio, tanto en la horizontal como en la vertical de un contenedor.

<div class="barra">
    Aquí colocarías tu barra de búsqueda
</div>

Ahora el CSS para que el contenido del <div> te quede en el medio, tanto en la vertical como en la horizontal:

.barra {
    display: flex;
    align-items: center;
    justify-content: center;    
}

Si esa división la quieres que ocupe toda la pantalla, para que la barra de búsqueda te quede en el centro de la ventana, con una capa modal debajo que oculte parcialmente el contenido, sería así:

.barra {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-color: rgba(200, 200, 200, 0.5);
    z-index: 1000;
}
Miguel Angel
1651 76 102 5