html - 使用填充使输入居中

Question

我有一个表单，整个表单需要在页面中居中。出于设计原因，输入需要在字母周围留出一些空间。如果我给一个填充，输入就不再完全居中了。

我可以同时让输入居中并且文本内部有一些空间吗？

这里检查: https://jsfiddle.net/291thr5d/

CSS:

form {
    margin: 40px auto;
    width: 80%; max-width: 600px; min-width: 300px;
    background-color: aliceblue;
}

.title {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size:40px; line-height:40px;
    letter-spacing: 1px;
    margin:10px 0; padding: 20px;
}

HTML:

<form action="update.php" method="post">
    <input type="text" name="titol" value="Title post" class="title">
    <input type="submit" name= "actualitzar" value="Submit" class="submit">
</form>

Answer 1

你需要添加:

* {  
  box-sizing: border-box;
}

form {
  margin: 40px auto;
  width: 80%;
  min-width: 300px;
  background-color: aliceblue;
}

.title {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 1px;
  margin: 10px 0;
  padding: 20px;
}

* {
  box-sizing: border-box;
}

<form action="update.php" method="post">
  <input type="text" name="titol" value="Title post" class="title">
  <input type="submit" name="actualitzar" value="Submit" class="submit">
</form>

box-sizing includes padding and border in the element's total width and height

Documentation