如何在不移动表格前的文本的情况下使表格居中？

Question

我正在开发一种适用于 PHP 的表单，到目前为止它看起来不错，但我希望它们排在中间。现在它将整个内容与中间形式之前的文本居中。

我想将表格移到中间，它们目前位于中间，但并不完全像我希望的那样。我只希望表格本身排列起来，但我一直没能找到执行此操作的任何代码。

form { 
  display: inline-block; 
  text-align: left; 
}

input[type=text], select {
  width: 400px;
  height: 40px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=email], select {
  width: 400px;
  height: 40px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  resize: none;
  position:static;
  overflow: auto;
  width: 400px;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 400px;
  background-color: pink;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #c29bb8;
}

<form action="submitform.php" method="post">
  <label for="voornaam">Voornaam:</label>
  <input type="text" id="voornaam" onfocus="this.value=''" value="Vul hier je voornaam in..."><br><br>
  
  <label for="tussenvoegsel">Tussenvoegsel:</label>
  <input type="text" id="tussenvoegsel" onfocus="this.value=''" value="Vul hier eventueel een tussenvoegsel in..."><br><br>
  
  <label for="achternaam">Achternaam:</label>
  <input type="text" id="achternaam" onfocus="this.value=''" value="Vul hier je achternaam in..."><br><br>
  
  <label for="mail">E-mail:</label>
  <input type="email" id="mail" onfocus="this.value=''" value="Vul hier je e-mail in..."><br><br>
  
  <label for="review">Review:</label>
  <textarea id="review" name="review"></textarea><br><br>
  
  <input type="submit" value="Verstuur">
</form> 

Answer 1

要使表单居中而不移动其前面的文本，您可以使用 CSS。您可以将表单包装在一个 div 中并给它一个类，然后使用以下 CSS 使表单居中：

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

以下是如何在 HTML 中实现此功能的示例：

这是表格前的一些文字

<div class="form-container">
  <form>
    <!-- form content goes here -->
  </form>
</div>

Answer 2

您可以简单地添加 margin-left 和 margin-right 并将它们设置为自动：

form { 
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left; 
}

input[type=text], select {
  width: 400px;
  height: 40px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=email], select {
  width: 400px;
  height: 40px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  resize: none;
  position:static;
  overflow: auto;
  width: 400px;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 400px;
  background-color: pink;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #c29bb8;
}

<form action="submitform.php" method="post">
  <label for="voornaam">Voornaam:</label>
  <input type="text" id="voornaam" onfocus="this.value=''" value="Vul hier je voornaam in..."><br><br>
  
  <label for="tussenvoegsel">Tussenvoegsel:</label>
  <input type="text" id="tussenvoegsel" onfocus="this.value=''" value="Vul hier eventueel een tussenvoegsel in..."><br><br>
  
  <label for="achternaam">Achternaam:</label>
  <input type="text" id="achternaam" onfocus="this.value=''" value="Vul hier je achternaam in..."><br><br>
  
  <label for="mail">E-mail:</label>
  <input type="email" id="mail" onfocus="this.value=''" value="Vul hier je e-mail in..."><br><br>
  
  <label for="review">Review:</label>
  <textarea id="review" name="review"></textarea><br><br>
  
  <input type="submit" value="Verstuur">
</form>