5

Buen día amigos,

Tengo el siguiente problema, debo poner el label debajo de cada input hasta ahí todo bien el problema es que no quedan alieneados, me muestra lo siguiente: introducir la descripción de la imagen aquí

Este es mi código: https://jsfiddle.net/cvaqpxby/1/

De antemano mil gracias!

3 respuestas 3

4

Una opción sería personalizar los inputs y label respectivos, utilizando display y margin para centrar el contenido y darle el posicionamiento que deseas

input[type=radio] {
    display: block;
    margin: 0 auto;
}
label {
    display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <label><input type="radio" name="radioset" />1</label>
  <label><input type="radio" name="radioset" />2</label>
  <label><input type="radio" name="radioset" />3</label>
  <label><input type="radio" name="radioset" />4</label>
  <label><input type="radio" name="radioset" />5</label>
  <label><input type="radio" name="radioset" />6</label>
  <label><input type="radio" name="radioset" />7</label>
  <label><input type="radio" name="radioset" />8</label>
  <label><input type="radio" name="radioset" />9</label>
  <label><input type="radio" name="radioset" />10</label>
</div>

Nos comentas si te sirve

0

Mira con estas modificaciones quedaria centrada, ya solo hay que definir si quieres que los elementos se desborden o no cuando los elementos superen el tamaño del contenedor padre.

    .radio-change{
         margin-left: -5px;
         position: relative;
     left: 20p;
     display: flex !important;
     flex-direction: column;
     align-items: center !important;
     width: 11%;

    }

    .radio-change  label{
    min-height: 22px;
    line-height: 22px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    }


  .inputs-container {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
  }
0

Esta es lo mínimo posible para lograr eso.

.inputs-container{
  display: flex;
}

.inputs-container .input-question {
  text-align: center;
}
 .inputs-container .input-question input {
   display: block;
   min-width: 25px;
}

¡Saludos!

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.