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>
	</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;
}

Editar

Responder la pregunta

Pablo

Respuestas

Yo creo que lo que te pasa en ese código es que la división con class="barrabusqueda" la tienes dimensionada a 200px;

Por ello, aunque el contenido lo tengas centrado, siempre aparecerá a la izquierda, que es la alineación del contenido del padre.

Creo que tendrías que poner class="barrabusqueda" con width a 100% (o no ponerle width que sería lo mismo) y así el contenido que pongas con justify-content: center; se centrará perfectamente.

María

189 4 17 11

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

3320 147 216 17

Aportar una respuesta