如何在不使文本居中的情况下对齐输入

Question

我有一个问题。

我需要帮助将输入类型的文本和电子邮件居中，这两者也应该彼此相邻。同时将下面的输入复选框居中。

它应该看起来就像text_box_newsletter一样。它需要在中心。

我被困住了，尝试了一切，所以现在我只是困惑。

请帮助学生:)多谢！

.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
}
.grid_newsletter .checkbox {
margin-top:
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin-top: 27px;
margin-left: auto;
margin-right: auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px;
padding-bottom: 35px;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}

<div class="grid_newsletter">
<div class="padding">
<div class="content">
<div class="text">Newsletter</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div>

Answer 1

在窗体上，您可以使用弹性框对齐所有项目：

.your-form-selector {
display: flex;
justify-content: center;
}

我已经对此进行了测试，除非我误解了这个问题，否则它可以工作。

我尽量避免对块内容使用text-align，因为这可能会破坏从右到左的脚本语言。不过，如果您从未打算扩展您的网站，这应该不是问题。

Answer 2

你也可以这样做，所有字段都应该居中对齐，最好是针对div 而不是目标元素。

.content { text-align: center; }

Answer 3

将这些添加到属性中，您将被排序：

form,.checkbox {
text-align: center;
}

Answer 4

使用Flexbox是一个很好的方法，但是，它在较旧的浏览器(Internet Explorer(中不受支持，因此以下内容将执行完全相同的操作。

form input { display:block; margin:auto;}
.checkbox { text-align:center;}

Answer 5

我使用了 2 个弹性框。

1. 包含输入字段的列
2. 包含复选框的行。这也允许垂直对齐，因此复选框后面的文本与复选框的中心整齐对齐。

此外，缺少 2 个结束div。

.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
}
.grid_newsletter .checkbox {
margin-top:
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin: 27px auto 0 auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px 0 35px 0;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
/* Added */
.grid_newsletter form {
display: flex;
flex-direction: column;
align-items: center;
}
.grid_newsletter .checkbox {
display: flex;
justify-content: center;
align-items: center;
}
.grid_newsletter .checkbox a {
margin: 0 0 0 0.5rem;
}

<div class="grid_newsletter">
<div class="padding">
<div class="content">
<div class="text">Newsletter</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div>
</div>
<!-- Added -->
</div>
<!-- Added -->