html - 如何将元素对齐到中心？

Question

我有两个问题。

首先，

我有一个表单，我试图将所有内容置于表单的中心，同时将文本与字段的左侧对齐。

我尝试将 justify-center 和 align-items 分配给“container”类和“form-style”类，但没有任何效果。

部分代码和一个Codepen链接

.form-style {
  width: 50%;
  position: relative;

   display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;

还有，

.container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  }

其次，

我正在尝试让我的提交按钮获得 100% 的宽度并且什么都没有 - 两侧有空间，

input[type="submit"] {
  display: block;

  background-color: #08ABD9;
  font-family: 'jura', sans-serif;
  font-size: 16pt;
  font-weight: bold;

  height: 40px;
  border: none;
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;

    }

Answer 1

从这里开始:您的代码中存在语法错误。由于存在不可见字符，无法识别容器上的 display:flex。所有 flex 属性都不起作用。

所以首先解决这个问题。只需完全删除该行并重新编写 display: flex。您会注意到您的布局发生了重大变化。

其次，您的 flex-direction 在您的标签/输入容器上设置为 column。垂直堆叠您的表单元素。

#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    margin-left: 40px;
}

如果您希望文本和输入排成一行，请使用flex-direction: row。

最后，关于您的提交按钮，您的容器具有左右填充以防止按钮到达边缘。

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

删除填充规则后，按钮将从边延伸到边。