Center an input with a padding

Question

I have a form the whole form needs to be centered in the page. The inputs need some space around the letters for design reasons. If I give a padding the inputs are not perfectly centered anymore.

Can I have the inputs centered and the text inside with some space at the same time?

Here to check: 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>

Possible duplicate of [width: 100%-padding?](https://stackoverflow.com/questions/5219175/width-100-padding) — Temani Afif, Jan 09 '18 at 18:48

score 2 · Accepted Answer · edited Jan 09 '18 at 19:36

You need to add:

* {  
  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

just a must read about the answer here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp — Calvin Nunes, Jan 09 '18 at 18:54

score 0 · Answer 2 · answered Jan 09 '18 at 20:30

0

please add text-align: center to your .title class properties.

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;
  text-align: center;
}

* {
  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>

answered Jan 09 '18 at 20:30

JideLambo

91
3

Why do you say that I need text-align: center ? I do not see the relation with what I am asking. I think the point is box-sizing: border-box; – Nrc Jan 10 '18 at 08:12
I mistook your question for centring the 'value' text inside your input tag. I hope you have the solution now. My bad. – JideLambo Jan 10 '18 at 08:22
Ok, no problem, Luis Felipe get the solution. – Nrc Jan 10 '18 at 16:35

Center an input with a padding

2 Answers2