如何將元素與中心對齊？

Question

我有兩個問題。

第一，

我有一個表單，我正在嘗試將所有內容居中放置在其中居中的位置，同時將文本與字段的左側對齊。

我試圖將“居中”和“對齊”項提供給“容器”類和“表單樣式”類，但沒有任何效果。

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

刪除填充規則后，按鈕將在邊緣之間延伸。