Aligning labels vertically with inputs

Question

Aligning labels vertically with inputs

How can I align all my input fields (image) to the same vertical line?

I tried using the vertical-align css property and a sass mixin I found (see below), but neither seemed to work.

@mixin vertical-align($pos) {
    position: $pos;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Is there a simple solution for this? I've been struggling with it for half an hour now...

Here's a fiddle that includes the css & html code.

css vertical-alignment

Answer 1

Answer №1

When using the vertical-align property, it allows elements to be aligned vertically along a horizontal line. To create a two-column grid where all inputs start at the same point on the line, you can follow these steps:

To achieve this effect:

label {
  display: inline-block;
  width: 5em;
}

Answer 2

When using the vertical-align property, it allows elements to be aligned vertically along a horizontal line. To create a two-column grid where all inputs start at the same point on the line, you can follow these steps:

To achieve this effect:

label {
  display: inline-block;
  width: 5em;
}

Answer 3

Answer №2

If you prefer, tables can also be used! Check out your revised fiddle here:

http://jsfiddle.net/qych4/5/

Your code has been formatted as well!

<section>
        <article>
            <form action="" id="book" method="post" name="book">
                <fieldset>
                    <legend>Boek</legend>
                    <table>
                        <tr>
                            <td><label>Email:</label></td>
                            <td><input type=""></td>
                        </tr>
                        <tr>
                            <td><label>Tours:</label></td>
                            <td><input type="checkbox"></td>
                        </tr>
                        <tr>
                            <td><label>Techno</label></td>
                            <td><input type="checkbox"><label>HCore</label>
                            <input type="checkbox"><label>Trance</label></td>
                        </tr>

                        <tr>
                            <td><label for="">Aantal pers:</label></td>
                            <td><input type="number"></td>
                        </tr>
                        <tr>
                            <td><label>Bericht:</label></td>
                            <td><textarea></textarea></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </article>
    </section>

Answer 4

If you prefer, tables can also be used! Check out your revised fiddle here:

http://jsfiddle.net/qych4/5/

Your code has been formatted as well!

<section>
        <article>
            <form action="" id="book" method="post" name="book">
                <fieldset>
                    <legend>Boek</legend>
                    <table>
                        <tr>
                            <td><label>Email:</label></td>
                            <td><input type=""></td>
                        </tr>
                        <tr>
                            <td><label>Tours:</label></td>
                            <td><input type="checkbox"></td>
                        </tr>
                        <tr>
                            <td><label>Techno</label></td>
                            <td><input type="checkbox"><label>HCore</label>
                            <input type="checkbox"><label>Trance</label></td>
                        </tr>

                        <tr>
                            <td><label for="">Aantal pers:</label></td>
                            <td><input type="number"></td>
                        </tr>
                        <tr>
                            <td><label>Bericht:</label></td>
                            <td><textarea></textarea></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </article>
    </section>

Aligning labels vertically with inputs

Answer №1

Answer №2

Similar questions

Select a color by inputting the type as "color" while leaving a space between the border and

The React style background property for CSS styling

What's the reason behind the presence of the a tag before the button in this

<Select> Placeholder customization

Click X button to toggle and close the dropdown menu

What is the best way to position elements at the top and bottom of a container?

How can you resolve redefinition warnings detected by the CSS Validator?

What steps should I follow to ensure that the "-> comes after the text?

Overlap with upper picture formatting

Using Bootstrap to create a floating image amidst surrounding elements

Why is the column width on this Tumblr page constantly flickering?

Having trouble adding animation to button element following the application of :after pseudo-element styling

Stop the bootstrap navbar from resizing

Blend the background color seamlessly with the image without affecting the content

The collapsible section expands upon loading the page

numerous requirements for formatting utilizing Css modules

The issue of a non-functional grid with scroll in a flexbox

Tips for revealing a position: absolute div that is currently hidden with display: none styling

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

The CSS dropdown menu is malfunctioning on Internet Explorer and Firefox