如何在 HTML 和 CSS 的 flexbox 表单容器中居中标签？

问题描述 投票：0回答：4

我多次尝试将我的标签对齐到中间，但由于某种原因它不起作用。 我将我的表单 div 设置为 flex，同时对齐项目并证明内容居中。 但是，无论我尝试用我的标签做什么，我似乎都无法将它们居中......

我在标签 css 等上尝试了 align-item，基本上我认为问题可能与 width: 100% on inputs 有关，但我不确定，任何人都可以确认或帮助找到解决方案吗？

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>

html css label alignment text-alignment
4个回答
0
投票

您可以通过多种方式做到这一点。如果您将每个标签包装在一个 div 中，然后将 flex 应用于 div 并使用 justify-content:center ，这也将起作用。使用您的代码，您可以简单地将标签上的显示更改为块（这将使其宽度为 100%），然后使用 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>

0
投票

要使标签在表单中居中，您可以使用表单本身的 display:flex 属性，然后使用 justify-content:center 和 align-items:center 使标签水平和垂直居中。此外，您可以将输入元素及其各自的标签包装在一个单独的 div 元素中，以使它们正确居中。这是修改后的代码：

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

在此代码中，我添加了一个新的 div 元素，其类 inputWrapper 包装了输入元素及其各自的标签。 display: flex、flex-direction: column 和 align-items: center 属性被添加到 .form 类中，使标签和输入元素在表单中居中 (coryrylan.com)。

0
投票

你太复杂了。

你只需要使用 

block
而不是 
inline-block
然后你就可以居中对齐文本。就是这样！

label {
    display: block; 
    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>

-1
投票

使用

.formConatiner{
text-align: center;

希望这有帮助；

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.