¿Cómo alinear verticalmente dos o más elementos (uno al lado del otro) en un div?

Solución:

Coloque la alineación vertical en los divs internos

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}

display: flex es una herramienta genial para tener en tu cinturón de herramientas. A continuación, se incluye documentación útil para comenzar.

Específicamente en su caso estas propiedades serían útiles:

align-items:center – esto alineará verticalmente los centros de todos los elementos secundarios

justify-content:center – esto centrará horizontalmente los elementos secundarios dentro del contenedor principal (no estoy seguro de querer esto o no, pero también puede ser útil)

.footer-icons {
    border: 1px solid #000;
    padding-top:40px;
    width:300px;
    margin: auto;
    
    display:flex;
    align-items:center;
    justify-content:center;
}

<div class="footer-icons">
    <div id="footer-twitter">
        Center me  
    </div>
    <div id="footer-fb">
         <img src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png" width="40" alt="">   
    </div>
</div>

Definir un line-height igual o mayor que el icono más grande:

.footer-icons {
    ...
    line-height: 32px;
}

---

---

Utiliza Nuestro Buscador