我试过多次将我的标签对齐到中间,但由于某种原因,它不起作用。我将表单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>
4条答案
按热度按时间4nkexdtk1#
使用
希望这有帮助;
qvk1mo1f2#
有很多方法可以做到这一点。如果你将每个标签 Package 在一个div中,然后将flex应用到div中,并使用justify-content:center,这也会起作用。使用您的代码,您可以简单地将标签上的显示更改为block(这将使其具有100%宽度),然后使用text-align:center
cczfrluj3#
要使标签在表单中居中,可以使用显示:flex属性,然后使用justify-content:中心和对齐项:center将标签水平和垂直居中。此外,您可以将输入元素及其各自的标签 Package 在一个单独的div元素中,以使它们正确地居中。下面是修改后的代码:
在这段代码中,我添加了一个新的div元素,类inputWrapper Package 了输入元素及其各自的标签。显示器:弯曲,弯曲方向:column和align-items:center属性被添加到.form类中,以使标签和输入元素在表单(coryrylan.com)中居中。
vawmfj5a4#
你把事情弄得太复杂了
你只需要使用
block
而不是inline-block
,然后你就可以居中对齐文本了。就是这样!你可以在这里看到它的工作: