Solution 1 :

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>

Solution 2 :

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)

Solution 3 :

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>

Problem :

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

Comments

Comment posted by DBS

Start by closing your tags and using valid quotation marks.

Comment posted by f3re0

I changed the quotation marks, but which tags do you mean?

Comment posted by jsfiddle.net/qw6gvjms

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 :

Comment posted by Ilias Karim

No the question asks for vertical not horizontal alignment.

Comment posted by stackoverflow.com/a/1946446/9288348

Self closing tags do not

Comment posted by DBS

@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)

By

Leave a Reply

Your email address will not be published. Required fields are marked *