Question

我有两个问题。

第一，

我有一张表格，我试图将所有内容都集中到它的中心，同时将文字对齐到字段的左侧。

我试图将“对齐中心”和“对齐”项目提供给＆＃34;容器＆＃34;上课和'＃34;形式'＆＃34;上课，什么都没有。

部分代码和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;
}

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

如何将元素与中心对齐？

1 个答案: