How to center labels in HTML/CSS flexbox form?

cjs
May 19, 2023
268 views
3 votes
4 Answers

i tried multiple times to align my label to the middle but for some reason its not working.
i have my form div set to flex with both align items and justify content to center.
but still, no matter what i try to do with my labels, i cant seem to center them…

i tried align-item on the label css etc, essentially i think the problem might be connected to the width: 100% on the inputs but im not sure, can anyone confirm or help finding a solution?

html, body {
    margin: 0;
    padding: 0;
}

.formContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #d3d3d3;
}

.formInput {
    display: block;
    margin: 25px 0px;
    border: none;
    width: 100%;
}

label {
    display: inline-block;
  }

<div class="formContainer">
            <form class="form" onsubmit="return false">
                <h1 class="formTitle">title</h1>
                <input required class="formInput" type="text" placeholder="a">
                <label for="b">b</label>
                <input required id="b" class="formInput" type="date">
                <label for="c">c</label>
                <select required id="c" class="formInput">
                    <option selected disabled value="">Select an option</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button class="addBtn">Add</button>
            </form>
    </div>

Answers

there are a number of ways you can do this. If you wrap each label in a div and then apply flex to the div and use justify-content:center that will work too. With your code you can simply change the display on the label to block (which will give it 100% width) and then use text-align:center

html, body {
    margin: 0;
    padding: 0;
}

.formContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #d3d3d3;
}

.formInput {
    display: block;
    margin: 25px 0px;
    border: none;
    width: 100%;
}

label {
    display: block;
    text-align:center;
    ;
  }

<div class="formContainer">
            <form class="form" onsubmit="return false">
                <h1 class="formTitle">title</h1>
                <input required class="formInput" type="text" placeholder="a">
                <label for="b">b</label>
                <input required id="b" class="formInput" type="date">
                <label for="c">c</label>
                <select required id="c" class="formInput">
                    <option selected disabled value="">Select an option</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button class="addBtn">Add</button>
            </form>
    </div>

- MurtazaJoo
- May 19, 2023 at 7:02 pm
- 0 votes
0
Use
```
.formConatiner{
text-align: center;
```
Hope this Helps;
Login or Signup to reply.

To center the labels within the form, you can use the display: flex property on the form itself, and then use justify-content: center and align-items: center to center the labels horizontally and vertically. Additionally, you can wrap the input elements and their respective labels in a separate div element to center them properly. Here’s the modified code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Center Labels in Form</title>
<style>
    html, body {
        margin: 0;
        padding: 0;
    }

    .formContainer {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .form {
        margin-top: 5px;
        padding: 10px;
        border: 1px solid #d3d3d3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .formInput {
        display: block;
        margin: 25px 0px;
        border: none;
        width: 100%;
    }

    label {
        display: inline-block;
    }

    .inputWrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
</style>
</head>
<body>
    <div class="formContainer">
        <form class="form" onsubmit="return false">
            <h1 class="formTitle">title</h1>
            <div class="inputWrapper">
                <input required class="formInput" type="text" placeholder="a">
                <label for="b">b</label>
                <input required id="b" class="formInput" type="date">
                <label for="c">c</label>
                <select required id="c" class="formInput">
                    <option selected disabled value="">Select an option</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <button class="addBtn">Add</button>
        </form>
    </div>
</body>
</html>

In this code, I’ve added a new div element with the class inputWrapper that wraps the input elements and their respective labels. The display: flex, flex-direction: column, and align-items: center properties are added to the .form class to center the labels and input elements within the form (coryrylan.com).

You’re over-complicating it.

You just need to do use block instead of inline-block and then you can center-align the text. That’s it!

label {
    display: block; 
    text-align:center;
  }

You can see it working here:

html, body {
    margin: 0;
    padding: 0;
}

.formContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #d3d3d3;
}

.formInput {
    display: block;
    margin: 25px 0px;
    border: none;
    width: 100%;
}

label {
    display: block; 
    text-align:center;
  }

<div class="formContainer">
            <form class="form" onsubmit="return false">
                <h1 class="formTitle">title</h1>
                <input required class="formInput" type="text" placeholder="a">
                <label for="b">b</label>
                <input required id="b" class="formInput" type="date">
                <label for="c">c</label>
                <select required id="c" class="formInput">
                    <option selected disabled value="">Select an option</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button class="addBtn">Add</button>
            </form>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.