Verán, tengo un div, con 30px de altura, es la cabecera de una tarjeta, en dicho div, voy a cargar el nombre de mis usuarios.
Ahora, el detalle es que cuando el nombre es corto, se posiciona en lo mas arriba del Div, y cuando es muy largo se forman dos lineas de texto.
Asi, esta es la maqueta.
Pero no me gusta que cuando el nombre es corto, el nombre queda en la parte de arriba, me gustaria que quede centrado tanto horizontal como verticalmente, y ya cuando el nombre sea largo, pues que se formen las dos lineas de texto.
Este es el HTML de la tarjeta.
<div class="card-patient">
<div class="header-card">
<center>Aldahir Ruiz Valdez</center>
</div>
<div class="body-card">
<img src="user-icon.png">
<center><p class="span-carnet">10670537</p> </center>
<center><button class="button-atender">Atender</button><button class="button-ver">Ver</button></center>
<center><button class="button-derivar">Derivar</button></center>
</div>
<div class="footer-card">
<center><p>EN ESPERA</p> </center>
</div>
</div>
Y este es el CSS (Solo del header y parte del Body, para no poner el Css entero)
.card-patient{
width: 200px;
background: red;
margin: 10px;
display: inline-block;
font-family: 'Roboto', sans-serif;
}
.header-card{
background: blue;
padding: 5px;
font-size: 17px;
height: 40px;
}
.body-card{
height: 190px;
}
He estado investigando y pues, no encontre una solucion optima, si pudiesen ayudarme con esto, les agradeceria mucho.
.header-card div {top:50%; transform: translateY(-50%)}
espero te ayude a solucionarlo.