0

Estoy intentando alinear una secuencia de inputs radios, pero no soy capaz. Una vez que pongo align center no salen alineados verticalmente los botones. Necesito que queden los inputs alineados en el centro y verticalmente, junto con el texto. Es para un formulario concreto.

¿Alguien me puede ayudar?

<!DOCTYPE html>
<html>

<head>

  <style>
    body {
      font-size: 16px;
      font-weight: 400;
      height: 100%;
      line-height: 28px;
      vertical-align: baseline;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      color: #646464;
      background-color: #ffffff;
    }
    
    .test {
      width: 100%;
      color: #5d5d5d;
      font-size: 20px;
      text-align: center;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
    }
    
    input[type='radio'],
    label {
      vertical-align: baseline;
      padding: 10px;
      margin: 10px;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Test</title>

</head>

<body>
  <form method="post" name="prueba">
    <section>
      <div class="test" style="">
        <input class="a" id="Yo no me he dado de alta" name="P6" type="radio" value="Yo no me he dado de alta" /><label class="">&nbsp; Yo no me he dado de alta</label> <br>

        <input class="inputradio" id="Un familiar está dado de alta" name="P6" type="radio" value="Un familiar está dado de alta" /><label class="motivos">&nbsp; Un familiar está dado de alta</label> <br>


        <input class="inputradio" id="Mi vecino me lo recomendó" name="P6" type="radio" value="Mi vecino me lo recomendó" /><label class="motivos">&nbsp; Mi vecino me lo recomendó</label> <br>

        <input class="inputradio" id="111" name="P6" type="radio" value="Otro motivo" /><label class="motivos">&nbsp; Otro motivo</label>
      </div>
    </section>



  </form>
</body>

</html>

1 respuesta 1

1

Hola tal vez esto podria servirte se usa un container para alinear

<!DOCTYPE html>
<html>

<head>

  <style>
h4 {
  text-align: center;
}

.container {
  text-align: left;
  padding-left: 30%;
}
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Test</title>

</head>

<body>

<div class="container">
  <form method="post" name="prueba">
    <section>
      <div class="test" style="">
        <input class="a" id="Yo no me he dado de alta" name="P6" type="radio" value="Yo no me he dado de alta" /><label class="">&nbsp; Yo no me he dado de alta</label> <br>

        <input class="inputradio" id="Un familiar está dado de alta" name="P6" type="radio" value="Un familiar está dado de alta" /><label class="motivos">&nbsp; Un familiar está dado de alta</label> <br>


        <input class="inputradio" id="Mi vecino me lo recomendó" name="P6" type="radio" value="Mi vecino me lo recomendó" /><label class="motivos">&nbsp; Mi vecino me lo recomendó</label> <br>

        <input class="inputradio" id="111" name="P6" type="radio" value="Otro motivo" /><label class="motivos">&nbsp; Otro motivo</label>
      </div>
    </section>



  </form>
   </div>
</body>

</html>

Me base de la siguiente respuesta.

HTML/CSS alinear input radio

1
  • muchas gracias!
    – elqprogore
    Commented el 26 may. 2021 a las 15:52

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.