How can I align the checkboxes and text vertically?

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Ilias Karim wants to to this 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

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 (eg <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; }

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

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

Answer 2

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