Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Alinear horizontalmente cuatro elementos dentro de un header

Estas en el tema de Alinear horizontalmente cuatro elementos dentro de un header en el foro de CSS en Foros del Web. Hola. Estoy intentando alinear un título, logo, menu (nav) y un campo de formulario de búsqueda todo dentro del mismo encabezado header. He probado varias ...
  #1 (permalink)  
Antiguo 21/08/2015, 14:08
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 19 años, 10 meses
Puntos: 65
Alinear horizontalmente cuatro elementos dentro de un header

Hola.

Estoy intentando alinear un título, logo, menu (nav) y un campo de formulario de búsqueda todo dentro del mismo encabezado header. He probado varias opciones, incluso logro tenerlos alineados h1 y el logo pero si sigo añadiendo más no encuentro la manera.

Estoy probando de esta manera:

Código HTML:
Ver original
  1. <!-- Header -->
  2.     <header>           
  3.         <h1>Mira tu regalo</h1>
  4.         <img src="img/logo-web.png" class="logo">      
  5.         <nav>
  6.             <ul>               
  7.                 <li class="inicio"><a href="index.php" accesskey="i" title="Web">Inicio</a></li>
  8.                 <li class="que-ofrecemos"><a href="que-ofrecemos.php" accesskey="q" title="Qué ofrecemos">Qué ofrecemos</a></li>
  9.                 <li class="registro"><a href="login.php" accesskey="r" title="Registro">Registro</a></li>              
  10.             </ul>
  11.         </nav>      
  12.         <aside id="buscador">
  13.             <!-- Aquí formulario de búsqueda -->
  14.             <form action="" method="post" name="buscar_usuario">
  15.                 <input type="text" name="usuario">
  16.                 <input type="submit" name="buscar" value="Buscar">
  17.             </form>
  18.             <!-- Fin formulario de búsqueda -->
  19.             <p>Texto de prueba</p>
  20.         </aside>       
  21.     </header>
  22.     <!-- Fin Header -->

Y el estilo siguiente:

Código CSS:
Ver original
  1. header{
  2.     background-color: #EC7176;
  3.     width: 98%;
  4. }
  5. header h1 {
  6.     display: inline-block; 
  7.     margin: 10px;
  8.     text-align: left;
  9.     width: 35%;
  10. }
  11. header > img{
  12.     border: 1px solid black;
  13.     display: inline-block;
  14.     text-decoration: underline;
  15. }
  16. header > nav{
  17.     background: #64A174;
  18.     display: inline-block;
  19.     text-align: center;
  20.     width: 10%;
  21.     /*width: 98%;*/
  22. }
  23. header > aside{
  24.     border: 1px solid black;
  25.     display: inline-block;
  26. }

¿Qué otra opción debo probar o en que estoy fallando?

Gracias, saludos
  #2 (permalink)  
Antiguo 21/08/2015, 19:41
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 8 años, 2 meses
Puntos: 208
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Si entendi bien tu pregunta, con esto lo solucionas:

Código CSS:
Ver original
  1. h1, img, nav, aside{
  2.     vertical-align:middle;
  3. }

Eso, o usar flexbox..

Saludos
  #3 (permalink)  
Antiguo 21/08/2015, 22:46
 
Fecha de Ingreso: agosto-2015
Mensajes: 2
Antigüedad: 7 años, 5 meses
Puntos: 3
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Creo que quieres esto:

Código HTML:
Ver original
  1.   <img src="http://lorempixel.com/1/1">
  2.             <ul>
  3.                 <li><a href="#Boton1" class="botones-menu">Boton1</a></li>
  4.                 <li><a href="#Boton2" class="botones-menu">Boton2</a></li>
  5.                 <li><a href="#Boton3" class="botones-menu">Boton3</a></li>
  6.                 <li><input type="text" class="buscador"></li>
  7.             </ul>
  8.         </header>

Código CSS:
Ver original
  1. header {
  2.     width: 100%;
  3.     height: 70px;
  4.     background: #111;
  5.     display: flex;
  6.     justify-content:space-between;
  7.     flex-wrap: wrap;
  8. }
  9.  
  10. img {
  11.   width: 250px;
  12. }
  13.  
  14. ul {
  15.     display: flex;
  16.     align-items: center;
  17.     flex-wrap: wrap;
  18.  
  19. }
  20.  
  21. ul>li {
  22.     list-style: none;
  23. }
  24.  
  25. .botones-menu {
  26.     margin: 10px;
  27.     list-style: none;
  28.     background: #333;
  29.     color: #fff;
  30.     text-decoration: none;
  31.     width: 100px;
  32.     height: 35px;
  33.     display: flex;
  34.     align-items: center;
  35.     justify-content: center;
  36.     -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  37.     -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
  38.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  39.     font-size: .9em;
  40. }
  41.  
  42. .botones-menu:hover {
  43.     background: #222;
  44. }
  45.  
  46. .buscador {
  47.   margin-right: 10px;
  48.   height: 30px;
  49. }
  #4 (permalink)  
Antiguo 21/08/2015, 23:56
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 8 años, 2 meses
Puntos: 208
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

display: flex, align-items y justify-content están mal aplicados.. Son propiedades que se asignan a elementos padre para acomodar sus respectivos hijos.. Y se lo estas aplicando a los enlaces directamente con la clase .botones-menu.

Revisa el enlace que dejé en mi respuesta anterior, es una guia flexbox.

Igualmente sigo insistiendo en que con aplicar vertical-align es suficiente.

Saludos
  #5 (permalink)  
Antiguo 22/08/2015, 09:00
 
Fecha de Ingreso: agosto-2015
Mensajes: 2
Antigüedad: 7 años, 5 meses
Puntos: 3
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Es verdad, lo estaba aplicando a los enlaces.

Código HTML:
Ver original
  1.   <img src="http://lorempixel.com/250/100">
  2.             <ul>
  3.                 <li class="botones-menu"><a href="#">Boton1</a></li>
  4.                 <li class="botones-menu"><a href="#">Boton2</a></li>
  5.                 <li class="botones-menu"><a href="#">Boton3</a></li>
  6.                 <li><input type="text" class="buscador"></li>
  7.             </ul>

Código CSS:
Ver original
  1. header {
  2.     width: 100%;
  3.     height: 70px;
  4.     background: #111;
  5.     display: flex;
  6.     justify-content:space-between;
  7.     flex-wrap: wrap;
  8. }
  9.  
  10. img {
  11.   width: 250px;
  12. }
  13.  
  14. ul {
  15.     display: flex;
  16.     align-items: center; /*centra los botones verticalmente*/
  17. }
  18.  
  19. ul>li {
  20.     list-style: none;
  21. }
  22.  
  23. a {
  24.   text-decoration: none;
  25.   color: #fff;
  26. }
  27.  
  28. .botones-menu {
  29.     margin: 10px;
  30.     background: #333;
  31.     color: #fff;
  32.     text-decoration: none;
  33.     width: 100px;
  34.     height: 35px;
  35.     display: flex;
  36.     align-items: center; /*Centra verticalmente el texto de los botones*/
  37.     justify-content: center; /*Centra horizontalmente el texto de los botones*/
  38.  
  39.     font-size: .9em;
  40. }
  41.  
  42. .botones-menu:hover {
  43.     background: #222;
  44. }
  45.  
  46. .buscador {
  47.   margin-right: 10px;
  48.   height: 30px;
  49. }
  #6 (permalink)  
Antiguo 22/08/2015, 10:55
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 8 años, 2 meses
Puntos: 208
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Sigue estando mal.. los elementos <li> tienen solo 1 hijo Esos estilos se deben aplicar al <ul>.

Edito: Pensé que habia dejado la guía en mi mensaje anterior, era en otro post Es esta: FlexBox

Última edición por fede5426; 22/08/2015 a las 12:01
  #7 (permalink)  
Antiguo 25/08/2015, 07:14
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 19 años, 10 meses
Puntos: 65
Respuesta: Alinear horizontalmente cuatro elementos dentro de un header

Cita:
Iniciado por fede5426 Ver Mensaje
Si entendi bien tu pregunta, con esto lo solucionas:

Código CSS:
Ver original
  1. h1, img, nav, aside{
  2.     vertical-align:middle;
  3. }

Eso, o usar flexbox..

Saludos

Hola fede5426, la verdad es que solo con eso lo solucioné rápido, gracias por la ayuda y por el enlace FlexBox.

_Nick_ tu ejemplo también me sirve de mucho para aplicar a otros diseños parecidos.

Gracias a ambos por la ayuda, saludos

Etiquetas: alinear, background, color, cuatro, elementos, header, horizontalmente, php, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:05.