HTML / CSS align input radio [closed]

Question

HTML / CSS align input radio [closed]

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)

0

Good, I have a question about how I can vertically align each of the radio inputs, since when I put a LABEL longer than another one, the image occurs, I would like all the radio inputs to start in the same place (and that to put a longer option does not fade that way).

html css

asked by Adrián 01.01.2018 в 22:05

source

3 answers

how to save the result of a subquery in mysql in order to compare it problem with the use of java calendar

score 4 · Answer 1

Sure there will be better solutions, but I leave you the following. Applying text-align and padding :

h4 {
  text-align: center;
}

.container {
  text-align: left;
  padding-left: 30%;
}

<h4>¿Cuál es el ... ?</h4>

<div class="container">
  <form>
    <input type="radio" id="val1"
           name="respuesta" value="val1">
    <label for="val1">Opción dsasad</label><br>
    <input type="radio" id="val2"
           name="respuesta" value="val2">
    <label for="val2">Opción d</label><br>
    <input type="radio" id="val3"
           name="respuesta" value="val3">
    <label for="val3">Opción sadasdsadasd fdfsd</label><br>
  </form>
</div>

score 3 · Answer 2

As many have already responded with correct ways to solve your problem, what I will do is recommend you how to expand the way you can layout the html , so that is more ordered and with form tags that almost nobody knows, but which are good practices to use for w3c.

My recommendations:

Try to make the main container of all questions always the form tag.
To wrap each question you can use the fieldset tag.
Each textual question may be in a legend . If you realize, without adding extra styles, these are combined with the fieldset in a very aesthetic way and do not worry that "line" is a border of a lifetime. If it does not go with your styles, simply add a "none".
And to wrap each group of inputs, a div .
This is optional, but it is a good way to maintain order with each input and even customize the form of it and is wrapping these within the input. like this:
- < label > < input / > < / label >
Relate the ID of the Input with the FOR of each corresponding label.so:
- < label for="val1" > < input id="val1" / > < / label >
Always for accessibility, labels should have cursor: pointer assigned.
To make each input on a different line, instead of using < / br > , you can use display: block; on each label
With this way of using the html tags, getting the input (in this case label) aligned to one side, but still in the center of the question, is achieved simply by adding the div that groups the input:
- div {display: inline-block; text-align: left; }

That way regardless of the size of each label, these will always be centered, but in turn aligned.

* { padding: 0; box-sizing: border-box; margin: 0; }

body { font-size: 16px; font-family: arial; }

form { text-align: center; }

legend { font-weight: bold; padding: 1em; font-size: 18px;} 

fieldset{ border: solid 1px cyan; padding-bottom: 1em; }

fieldset div{ display: inline-block; text-align: left; }

label { display: block; cursor: pointer; }

<div class="container">
  <form>
    <fieldset class="form-question">
      <legend>¿Cuál es el ... ?</legend>
      <div class="group-input ">
        <label for="val1">
          <input type="radio" id="val1" name="respuesta">
          Opción dsasad
        </label>
        <label for="val2">
          <input type="radio" id="val2" name="respuesta">
          Opción d
        </label>
        <label for="val3">
          <input type="radio" id="val3" name="respuesta">
          Opción sadasdsadasd fdfsd
        </label>
      </div>
    </fieldset>
  </form>
</div>

I hope I helped you. Successes!

score 2 · Answer 3

The user Jose has already given you a perfectly valid solution, to complement it with other ways of doing it, I leave you this way.

#wrapper{
  display:table;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid green;
}
#formulario{
  display: table;
  margin: 0 auto;
}

<div id="wrapper">
  <p>¿Cuál es el lenguaje estándar específico para aplicar estilos de presentación a nuestra página web ?</p>
  <form id="formulario">
    <input type="radio" id="opcion1" name="opcion" value="opcion1">html
    <br>
    <input type="radio" id="opcion2" name="opcion" value="opcion2">css
    <br>
    <input type="radio" id="opcion3" name="opcion" value="opcion3">php
    <br>
    <input type="radio" id="opcion4" name="opcion" value="opcion4">xml
  </form>
</div>