How can I align the checkboxes and text vertically? - html

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

Answer 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>

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

Answer 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>