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

在表单上，您可以使用flexbox对齐所有项目：

.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 flexboxes。

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

此外，缺少2个关闭的divs。

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

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

5 个答案: