How can I align the checkboxes and text vertically?

Question

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

Do you want the checkbox to be align the same on the first visual column and the text to be centered aside according to the longest one ? Something alike : https://jsfiddle.net/qw6gvjms/ ? @iliasKarim — G-Cyrillus, Aug 01 '22 at 21:04

score 1 · Answer 1 · edited Aug 02 '22 at 19:49

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>

DBS · Answer 2 · 2022-08-01T10:10:49.687

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)

Self closing tags do not **need** to have a slash before the closing bracket, this is only the case when using XHTML. (Source: https://stackoverflow.com/a/1946446/9288348) — Jeremy, Aug 02 '22 at 08:36
@Jeremy They don't require a closing slash for technical reasons anymore, but it is still often considered good practice for readability and is a useful habit if working in frontend libraries that allow self-closing empty non-void elements (E.g. React's JSX) — DBS, Aug 02 '22 at 08:52

score 0 · Answer 3 · answered Aug 02 '22 at 19:54

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>

How can I align the checkboxes and text vertically?

3 Answers3