Ver Mensaje Individual
  #5 (permalink)  
Antiguo 22/08/2015, 09:00
_Nick_
 
Fecha de Ingreso: agosto-2015
Mensajes: 2
Antigüedad: 9 años, 4 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. }