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>
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)
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>
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
Start by closing your tags and using valid quotation marks.
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 :
No the question asks for vertical not horizontal alignment.
@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)
