2

Tengo dentro de un <div> varios elementos <span>, <button> y <img> alineados horizontalmente.

Necesito que estén centrados verticalmente. Deben estar entre ellos alineados horizontalmente y espaciadamente ocupando el 100% del <div>.

Al hacer mas pequeña la ventana del navegador los 3 primeros elementos deben alinearse verticalmente y el elemento 4 debe permanecer alineado horizontalmente a los 3

El código que tengo me lo centra verticalmente pero no consigo que los elementos se coloquen equitativamente en espaciado horizontal. Tampoco se como hacer que los primeros 3 elementos se me coloquen verticalmente en caso que la ventana del navegador se haga mas pequeña.

#container {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items; center;"
}
<div id="container">
    <span class="t1">Elemento1</span>
    <span class="t2">Elemento2</span>
    <button class="b1">Elemento3</button>
    <img class="i1">Elemento4</img>
</div>

2
  • primero que todo tienes una etiqueta img mal estructurada, segundo a que tamaño de ancho (width) quieres que se acomoden los 3 elementos vertical y el 4 horizontal?
    – zerokira
    Commented el 29 ago. 2018 a las 13:54
  • Me interesaría que el Width de los 3 elementos en vertical fuera del 50% y para el 4 el restante 50%
    – Popularfan
    Commented el 29 ago. 2018 a las 15:07

2 respuestas 2

3

Puedes hacerlo con justify-content: space-around; para alinearlo horizontalmente ocupando todo el espacio. Y para alinearlo verticalmente los elementos en resoluciones chicas, puedes utilizar flex-direction: column;.

body {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  /* muestra elementos con la misma separación alrededor de ellos */
  justify-content: space-around;
  /* alinea los elementos verticalmente */
  align-items: center;
}

/* media query para mobile */
@media (max-width: 480px) {
  #container {
    /* cambio la dirección de los elementos*/
    flex-direction: column;
  }
}
<div id="container">
    <span class="t1">Elemento1</span>
    <span class="t2">Elemento2</span>
    <button class="b1">Elemento3</button>
    <img class="i1" src="https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>


Nota

Te recomiendo que veas cómo se usan bien todos los elementos de flex antes de que empieces con esto, te dejo este link que es para que puedas entender fácilmente como funcionan todas las propiedades.

5
  • Genial ! Me coloca todos en vertical en caso que la ventana se hace mas pequeña. Pero como se haría para que solo me pusiera en vertical los tres primeros elementos y el ultimo estuviera en horizontal respecto a los 3 en vertical.
    – Popularfan
    Commented el 29 ago. 2018 a las 14:41
  • ¿Los primeros 3 en vertical y el 4to en horizontal para resoluciones más pequeñas? Deberías envolver esos primeros 3 en un <div> y luego agregarle las propiedades. Si me lo confirmás, edito la respuesta.
    – Kleith
    Commented el 29 ago. 2018 a las 15:30
  • Te lo confirmo es asi
    – Popularfan
    Commented el 29 ago. 2018 a las 23:33
  • En Firefox al hacer mas pequeña la ventana de navegación me cambia el tamaño de la imagen a mas pequeño hasta que llega a desaparecer si sigo haciendo mas pequeña la ventana.
    – Popularfan
    Commented el 30 ago. 2018 a las 9:01
  • Solucione el tema alfinal como me comentastes con otro div envolviendo los 3 elementos. Gracias !
    – Popularfan
    Commented el 30 ago. 2018 a las 13:30
0

Intenta con esto:

/*Para alinear en vertical cuando se haga pequeña la ventana*/

#container span,#container button,#container img{
    display: inline-block;
    width:20%;
} 

Para un mejor trabajo con estilos, mejor utilizar un framework, ejemplo bootstrap

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.