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

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

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