How can I align the checkboxes and text vertically?

user_13620618 0
Viewed 139

I want the checkboxes to be parallel to each other and the text to be aligned the same. This is what i have (i'm new to this):

<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>

This is how it looks like

vertical-alignment checkbox alignment css html
3 Answers

When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared

div {
  display: flex;
  gap: 3px;
  align-items: center
}
<div>
   <input type="checkbox" id="liste1" name="liste1" value="1">
   <label for="liste1"> Option 1</label>
</div>
<div>
   <input type="checkbox" id="liste2" name="liste2" value="2">
   <label for="liste2"> Option 2</label>
</div>
<div>
   <input type="checkbox" id="liste3" name="liste3" value="3">
   <label for="liste3"> Option 3</label>
</div>
<div>
   <input type="checkbox" id="liste4" name="liste4" value="4">
   <label for="liste4"> Option 4</label>
</div>

user_179393770

To start with, we'll correct the original version of the code:

  • ” is not a valid quote to use in HTML, you should use either " or '
  • If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />

This gives us: 

<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />

This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:

label {
  display: block;
}

input,
span {
  vertical-align: middle;
}
<label>
  <input type="checkbox" name="liste1" value="1" />
  <span>This is Example1</span>
</label>
<label>
  <input type="checkbox" name="liste1" value="2" />
  <span>Example2</span>
</label>
<label>
  <input type="checkbox" name="liste1" value="3" />
  <span>Example123456</span>
</label>
<label>
  <input type="checkbox" name="liste1" value="4" />
  <span>Option4</span>
</label>

(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)

user_16503370

your picture says column but your question says row. Which one do you want?

#container {
  display: flex;
  flex-direction:column;
  gap: 13px;
  align-items: center
}

#container2 {
  display: flex;
  margin-top:20vw;
  
  gap: 83px;
  justify-content:center;
}
<div id='container'>
  <div>
    <input type="checkbox" id="liste1" name="liste1" value="1">
    <label for="liste1"> Option 1</label>
  </div>
  <div>
    <input type="checkbox" id="liste2" name="liste2" value="2">
    <label for="liste2"> Option 2 xxx</label>
  </div>
  <div>
    <input type="checkbox" id="liste3" name="liste3" value="3">
    <label for="liste3"> Option 3 xxx xxx</label>
  </div>
  <div>
    <input type="checkbox" id="liste4" name="liste4" value="4">
    <label for="liste4"> Option 4 xxx</label>
  </div>
</div>

<div id='container2'>
  <div>
    <input type="checkbox" id="liste1" name="liste1" value="1">
    <label for="liste1"> Option 1</label>
  </div>
  <div>
    <input type="checkbox" id="liste2" name="liste2" value="2">
    <label for="liste2"> Option 2</label>
  </div>
  <div>
    <input type="checkbox" id="liste3" name="liste3" value="3">
    <label for="liste3"> Option 3</label>
  </div>
  <div>
    <input type="checkbox" id="liste4" name="liste4" value="4">
    <label for="liste4"> Option 4</label>
  </div>
</div>

user_43989660
Related