0

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:

introducir la descripción de la imagen aquí

¿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*/

1 respuesta 1

1

Con css, en la classe puntos, añade las siguientes propriedades:

.puntos { ... display: flex; align-items: center; ... }

4
  • <span class="puntos" style="display: flex; align-items: center;">. Funciona, pero entonces desaparecen los puntos suspensivos del text-overflow: ellipsis; que lleva la clase puntos. ¿Por qué puede ser? Commented el 15 ene. 2022 a las 20:05
  • 1
    Intenta sustituir display: flex por display: inline-flex. Si no funciona, adjunta el código css para que pueda verlo mejor.
    – dfvc
    Commented el 16 ene. 2022 a las 21:21
  • El comportamiento es el mismo. Te he adjuntado el código que me pides en el mensaje original. Commented el 17 ene. 2022 a las 16:21
  • Lo he resuelto repitiendo la clase puntos, poniéndosela también al <span> <!--Resto de datos-->. Commented el 20 ene. 2022 a las 16:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.