[SOLUCIONADO] Alinear horizontalmente cuatro elementos dentro de un header

[kahlito]

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:

<!-- Header -->
    <header>            
        <h1>Mira tu regalo</h1>
        <img src="img/logo-web.png" class="logo">       
        <nav>
            <ul>                
                <li class="inicio"><a href="index.php" accesskey="i" title="Web">Inicio</a></li>
                <li class="que-ofrecemos"><a href="que-ofrecemos.php" accesskey="q" title="Qué ofrecemos">Qué ofrecemos</a></li>
                <li class="registro"><a href="login.php" accesskey="r" title="Registro">Registro</a></li>              
            </ul>
        </nav>      
        <aside id="buscador">
            <!-- Aquí formulario de búsqueda -->
            <form action="" method="post" name="buscar_usuario">
                <input type="text" name="usuario">
                <input type="submit" name="buscar" value="Buscar"> 
            </form>
            <!-- Fin formulario de búsqueda -->
            <p>Texto de prueba</p>
        </aside>        
    </header>
    <!-- Fin Header -->
 

Y el estilo siguiente:

Código CSS:

header{
    background-color: #EC7176;
    width: 98%;
}
header h1 { 
    display: inline-block;  
    margin: 10px;
    text-align: left;
    width: 35%;
}
header > img{
    border: 1px solid black;
    display: inline-block;
    text-decoration: underline;
}
header > nav{
    background: #64A174;
    display: inline-block;
    text-align: center;
    width: 10%;
    /*width: 98%;*/
}
header > aside{
    border: 1px solid black;
    display: inline-block;
}
 

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

Gracias, saludos

[fede5426]

Si entendi bien tu pregunta, con esto lo solucionas:

Código CSS:

h1, img, nav, aside{
    vertical-align:middle;
}
 

Eso, o usar flexbox..

Saludos

[_Nick_]

Creo que quieres esto:

Código HTML:

<header>
  <img src="http://lorempixel.com/1/1">
            <ul>
                <li><a href="#Boton1" class="botones-menu">Boton1</a></li>
                <li><a href="#Boton2" class="botones-menu">Boton2</a></li>
                <li><a href="#Boton3" class="botones-menu">Boton3</a></li>
                <li><input type="text" class="buscador"></li>
            </ul>
        </header>
 

Código CSS:

header {
    width: 100%;
    height: 70px;
    background: #111;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}
 
img {
  width: 250px;
}
 
ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
 
}
 
ul>li {
    list-style: none;
}
 
.botones-menu {
    margin: 10px;
    list-style: none;
    background: #333;
    color: #fff;
    text-decoration: none;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: .9em;
}
 
.botones-menu:hover {
    background: #222;
}
 
.buscador {
  margin-right: 10px;
  height: 30px;
}
 

[fede5426]

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

[_Nick_]

Es verdad, lo estaba aplicando a los enlaces.

Código HTML:

<header>
  <img src="http://lorempixel.com/250/100">
            <ul>
                <li class="botones-menu"><a href="#">Boton1</a></li>
                <li class="botones-menu"><a href="#">Boton2</a></li>
                <li class="botones-menu"><a href="#">Boton3</a></li>
                <li><input type="text" class="buscador"></li>
            </ul>
</header>
 

Código CSS:

header {
    width: 100%;
    height: 70px;
    background: #111;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}
 
img {
  width: 250px;
}
 
ul {
    display: flex;
    align-items: center; /*centra los botones verticalmente*/
}
 
ul>li {
    list-style: none;
}
 
a {
  text-decoration: none;
  color: #fff;
}
 
.botones-menu {
    margin: 10px;
    background: #333;
    color: #fff;
    text-decoration: none;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center; /*Centra verticalmente el texto de los botones*/
    justify-content: center; /*Centra horizontalmente el texto de los botones*/
 
    font-size: .9em;
}
 
.botones-menu:hover {
    background: #222;
}
 
.buscador {
  margin-right: 10px;
  height: 30px;
}
 

[fede5426]

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

[kahlito]

Iniciado por fede5426

Si entendi bien tu pregunta, con esto lo solucionas:

Código CSS:

h1, img, nav, aside{
    vertical-align:middle;
}
 

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