Estoy haciendo estas tarjetas en mi pagina, y tengo un problema con los estilos que no logro resolver.
Verán, estoy creando las tarjetas dentro de una etiqueta esta tarjeta tiene display:inline-block;
lo cual deberia alinearlas, y lo hace, el problema es que si el nombre del doctor crea una siguiente linea, es como que el siquiente baja para que el texto este al mismo nivel. No se porque ocurre esto.
HTML
<div class="tarjeta-especialidad">
<img src="{{ URL::asset("img/png/user-icon.png") }}" style="min-width: 100px; min-height:100px" alt="">
<p>Fichas: 7 </p>
<p>Dr. {{ $Medico->nombre ." ". $Medico->apellidos}}</p>
</div>
CSS
.container-cards a{
text-decoration: none;
color: white;
display: inline-block;
}
.tarjeta-especialidad{
width: 130px;
height: 250px;
background: #97d1da;
margin: 5px;
text-align: center;
color: white;
border-radius: 5px;
padding: 5px;
color:#363B3E;
}
.tarjeta-especialidad img{
width: 100px;
margin: 10px;
color:#13ac4d;
border-radius: 100%;
}