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>