0

Tengo un botón check pegado a la derecha: este botón tiene diseño. A su lado derecho quiero poner un pequeño texto, pero este se alinea con la línea inferior del botón.
Ya intenté poner márgenes o padding y me mueve todo lo demás menos el texto.

Les pongo el código que intenté y una imagen de cómo se ve actualmente. El problema es que quiero que esté centrado con el diseño del check.

<div class="col-12 spaced-items">
            <h5>
                <i class="fa-solid fa-truck-front"></i>
                <span class="mx-2">Parte frontal</span>
            </h5>

            <div class="text-end">
                    <div class="custom-switch custom-switch-label-yesno">
                    <label >Daños</label>
                    <input id="dangos_frontal_chk" class="custom-switch-input" type="checkbox">
                    <label for="dangos_frontal_chk" class="custom-switch-btn"></label>
                    </div>
                
                

                <input id="dangos_frontal_val" type="hidden" value="0">
            </div>
        </div>

introducir la descripción de la imagen aquí

1
  • ¿Están los elementos dentro de un row? ¿Intentaste poner en una columna el h5 y en otra el switch de "daños"? Por cierto, podés crear un ejemplo mínimo verificable en la propia pregunta insertando un snippet (con el botón que indica <>).
    – padaleiana
    el 23 jun. 2022 a las 15:02

1 respuesta 1

0

Puedes intentar esto:

div.text-end>div {
    display: flex;
    align-items: center;
}

Y así, con un poco de css podrías alinearlo de manera centrada y no al margen inferior del contenedor

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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