Align vertical text on a card with image

Question

I need to align vertical text after image on a card design. All is fine, except the text, I need the text to align vertically because some cards have little text or a lot of text (3 or 4 lines)

.cardscurso {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  display: inline-block;
  width: 230px;
  max-width: 240px;
  height: 250px;
  max-height: 230px;
  min-height: 230px;
  background-color: #fff;
  border-radius: 5px;
  border-bottom: 22px solid #1EA4D3;
  color: #4E4E4E;
  margin-right: 0.2em;
  margin-left: 0.2em;
  margin-bottom: 3.2em;
  position: relative;
  font-family: roboto;
  font-size: 0.9em;
  line-height: 1.2944em;
  text-align: center !important;
  text-decoration: none;
}

.cardscurso a {
  text-decoration: none;
  color: #4E4E4E;
}

.cardscurso:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.cardscurso img {
  border-radius: 5px 5px 0 0;
  width: 100%;
  height: auto;
  background-position: center;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  height: 128px;
  width: 100;
  height: auto;
  border-bottom: 3px solid #1EA4D3;
}

.textin {
  position: relative;
  clear: both;
}

.textin p {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(20%);
  -moz-transform: translateY(20%);
  -ms-transform: translateY(20%);
  -o-transform: translateY(20%);
  transform: translateY(20%);
  margin: 0;
  padding: 0 1.4em;
  vertical-align: middle;
}

<div class="cardscurso">
  <a href="seguridad-industrial/curso-de-montacargas.html">
    <img src="imagenes/ventas/entrenamiento-para-vendedores.png" alt="Entrenamiento para vendedores" />

    <div class="textin">
      <p>Entrenamiento para vendedores</p>
    </div>
  </a>
</div>

The text is not vertically aligned, and with that code the text is align to parent, please check my code and provide me with the right code, thanks!!!

here is the cards example, the text in each card is not vertical align : https://alternika.com.mx/dazu/seguridad-industrial.html — Mauricio Rojas, Jul 24 '19 at 17:13
Yes, after de image and blue line the text is nos centered vertically, i need that — Mauricio Rojas, Jul 24 '19 at 18:17

score 0 · Accepted Answer · answered Jul 24 '19 at 18:04

you need to change <p> tag and instead of the have to add <span> because vertical-align: middle; is not work for block element and css should be

.textin{
  line-height: 60px;
}
.textin span{
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
}

here is the link https://jsfiddle.net/z306mrj4/8/ Hple this will be helpful for you

Align vertical text on a card with image

1 Answers1