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

vc6uscn9 于 2023-05-23 发布在其他

关注(0)|答案(4)|浏览(189)

我试过多次将我的标签对齐到中间，但由于某种原因，它不起作用。我将表单div设置为flex，使项目对齐，内容居中对齐。但是，不管我怎么处理我的标签，我似乎都不能把它们放在中心...
我尝试了align-item在标签css等，基本上我认为问题可能与宽度有关：100%的投入，但我不确定，任何人都可以确认或帮助找到一个解决方案？

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>

css

来源：https://stackoverflow.com/questions/76291029/how-to-center-labels-within-a-flexbox-form-container-in-html-and-css

4条答案

按热度按时间

4nkexdtk1#

使用

.formConatiner{
text-align: center;

希望这有帮助;

赞(0）回复(0）举报 2023-05-23

qvk1mo1f2#

有很多方法可以做到这一点。如果你将每个标签 Package 在一个div中，然后将flex应用到div中，并使用justify-content：center，这也会起作用。使用您的代码，您可以简单地将标签上的显示更改为block（这将使其具有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）回复(0）举报 2023-05-23

cczfrluj3#

要使标签在表单中居中，可以使用显示：flex属性，然后使用justify-content：中心和对齐项：center将标签水平和垂直居中。此外，您可以将输入元素及其各自的标签 Package 在一个单独的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 Package 了输入元素及其各自的标签。显示器：弯曲，弯曲方向：column和align-items：center属性被添加到.form类中，以使标签和输入元素在表单（coryrylan.com）中居中。

赞(0）回复(0）举报 2023-05-23

vawmfj5a4#

你把事情弄得太复杂了
你只需要使用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>

赞(0）回复(0）举报 2023-05-23

我来回答

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

4条答案

相关问题

热门标签

最新问答