How To Align Label To Left In Css

Aligning a label to the left in CSS is a common requirement when creating a responsive user interface. It’s a simple way to organize your labels and input fields, allowing users to easily understand and interact with your website.

In this tutorial, we will show you how to align a label to the left in CSS using the following steps:

Step 1: Create the HTML Structure

First, let’s create the basic HTML structure of our form. In this example, we will create a simple form field with a label and an input field:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<html>
<head>
    <title>How to align label to Left in CSS</title>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
        </div>
    </form>
</body>
</html>

Step 2: Add CSS Styles

To align the label to the left, add a CSS <style> section in the <head> of your HTML document. Then, you will create a rule for the .form-group and label elements as shown below:

1
2
3
4
5
6
7
8
9
10
11
 
<style>
.form-group {
    display: flex;
}
label {
    text-align: left;
    margin-right: 10px;
    width: 100px;
}
</style>

In this code snippet, we have set the .form-group element to have a display value of flex. This allows the label and input fields to align horizontally. We also set the text-align property of the label element to left to make sure the label is pushed to the left. We added margin-right and width properties to create a proper spacing and width for the label.

Step 3: Verify the Result

Verify the label alignment by previewing the output:

Output:

As you can see, the label is now aligned to the left in the output.

Full Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <title>How to align label to Left in CSS</title>
    <style>
        .form-group {
            display: flex;
        }
        label {
            text-align: left;
            margin-right: 10px;
            width: 100px;
        }
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
        </div>
    </form>
</body>
</html>

Conclusion

In this tutorial, we have learned how to align a label to the left in CSS by creating a simple form using HTML and then applying CSS styles to position the label correctly. You can use the same techniques to align labels on other types of form fields and controls, and easily create responsive and stylish user interfaces for your website.