I'm making these cards on my page, and I have a problem with the styles that I can't solve. You see, I'm creating the cards inside a label this card has display:inline-block;
which should align them, and it does, the problem is that if the doctor's name creates a next line, it's like the next one goes down so that the text is at the same level . I don't know why this happens.
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%;
}
Add the attribute
vertical-align: top;
to your classtarjeta-especialidad