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

What specific CSS selector should be targeted in order to modify the appearance of this button?

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

Exploring the Relative Positioning of Two div Elements

What should be done if an image is not wide enough to stretch it to match the width of the window?

What could be the reason for not just removing the pseudo-class, but instead deleting the entire CSS document altogether?

The fundamental principle of starting with mobile design in Bootstrap

Tips on boosting CSS specificity in Material-UI's makeStyle for styled components in order to successfully override the root style

Does this extensive combination of pseudo classes hold true?

Ensure that the text on the button is aligned to the right and is positioned directly

Obtaining the calculated background style on Firefox

Leveraging Masonry.js with dynamically created divs using jQuery

URL for CSS Background-Image

Creating evenly spaced PHP-generated divs without utilizing flexbox

What is the best way to ensure all table rows have consistent heights that are not affected by image sizes?

Tips for accessing the @keyframes selector and extracting the value from it

Problem with IE off-canvas scrolling

Using Node.js to Send Emails via API

What is the best way to emphasize a certain row within XSLT?

The alignment of elements in the div seems to be slightly skewed

Solving dependencies for npm modules