Dada la siguiente estructura HTML:
<form class="cancion-lista-<?=$id_lista?> cancion-lista cancion-no-publica row d-flex" method="post" action="<?=url_base?>recopilatorios/indice" data-id-cancion="<?=$id_cancion?>"> <!--Bloque con cada una de las canciones de cada lista-->
<span class="puntos" style="transform: translateY(-2px);"> <!--Información de la canción-->
<span class="numero-decada" data-id-cancion="<?=$id_cancion?>"><?=$orden?></span> <!--Puesto en el recopilatorio-->
<span class="">
<span class="font-italic"><?=$titulo_cancion?></span>
<span> de </span>
<span class="font-weight-bold"><?=$nombre_autor?></span>
<span>(<button class="boton-enlace" role="link" name="recopilatorio" value="<?=$recopilatorio?>"><?=$ano?></button>)</span>
</span> <!--Resto de datos-->
</span>
</form>
Que se traduce en cada una de estas celdas mediante un bucle:
¿Cómo podría elevar un poco <!--Resto de datos-->
con respecto a <!--Puesto en el recopilatorio-->
para que el texto quede también centrado verticalmente dentro de la celda? He probado a alterar el margin
y el padding
y a usar transform: translateY()
pero no hay reacción.
EDICIÓN:
Código CSS de la clase puntos
:
.puntos {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.puntos:hover {
overflow: visible;
z-index: 1;
} /*Trunca el texto con puntos suspensivos cuando es demasiado largo*/