HTML and CSS centering and applying space

Question

I have this HTML and CSS code here:

.container1{

    text-align: center;
    margin-top: 200px;
    font-size: 30px;
    padding: 30px;
    transform: perspective(1px) translateY(-50%);
}
.textbox{
    width: 300px;
    height: 50px;
    font-size: 20px;
    text-align: center;
}
.textbox{
    border-color: dodgerblue;
    box-shadow: 0 0 8px 0 blue;
}

body {
  background-color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">



  <script type="text/javascript">


    window.onload=function(){

function GetDays(){
            var dropdt = new 
Date(document.getElementById("drop_date").value).getTime();
            var pickdt = new 
Date(document.getElementById("pick_date").value).getTime();

            return parseInt((dropdt- pickdt) / (24 * 3600 * 1000));

}
document.getElementById("drop_date").addEventListener("change",function(){
    if(document.getElementById("drop_date").value){
        document.getElementById("numdays2").value=GetDays();
  } 
})
document.getElementById("pick_date").value = new Date().toISOString().slice(0,10);

    }

</script>

</head>
<body>

<div id="reserve_form" class="container1">

<div id="pickup_date"><p><label class="form">Todays Date:</label><input 
type="date" class="textbox" id="pick_date" name="pickup_date" disabled 
onchange="cal()"</p></div>

<div id="dropoff_date"><p><label class="form">Dropoff Date:</label><input 
type="date" class="textbox" id="drop_date" name="dropoff_date" /></p></div>

 <div id="numdays"><label class="form">Number of days:</label><input 
type="text" class="textbox" id="numdays2" name="numdays"/></div>

</div>
</body>
</html>

How would I give a bit of space between the text and the text box. I still need it centered, but need some space for the shadow to look nice.

Also, how can I align the text above each text-box instead of being on the left?

I have started HTML and CSS coding very recently, all of this is new to me, but very interesting!

Thank you

That worked, but the boxes don't match up.. in terms of lining up — , Mar 21 '19 at 10:27

score 0 · Answer 1 · answered Mar 21 '19 at 10:33

Also, how can I align the text above each text-box instead of being on the left?

Make the wrappers of each section inside container1 a column flexbox and add align-items: center to align it horizontally. Also add a margin to the textbox - see demo below:

window.onload = function() {

  function GetDays() {
    var dropdt = new
    Date(document.getElementById("drop_date").value).getTime();
    var pickdt = new
    Date(document.getElementById("pick_date").value).getTime();

    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));

  }
  document.getElementById("drop_date").addEventListener("change", function() {
    if (document.getElementById("drop_date").value) {
      document.getElementById("numdays2").value = GetDays();
    }
  })
  document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);

}

.container1 {
  text-align: center;
  margin-top: 200px;
  font-size: 30px;
  padding: 30px;
  transform: perspective(1px) translateY(-50%);
}

.textbox {
  width: 300px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  border-color: dodgerblue;
  box-shadow: 0 0 8px 0 blue;
  margin: 10px; /*added */
}

#pickup_date p, #dropoff_date p, #numdays { /* added */
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  background-color: #fff;
}

<div id="reserve_form" class="container1">

  <div id="pickup_date">
    <p><label class="form">Todays Date:</label><input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()"/> </p></div>

  <div id="dropoff_date">
    <p><label class="form">Dropoff Date:</label><input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
  </div>

  <div id="numdays"><label class="form">Number of days:</label><input type="text" class="textbox" id="numdays2" name="numdays" /></div>

</div>

score 0 · Answer 2 · answered Mar 21 '19 at 10:33

Here is the updated fiddle:

window.onload = function() {

  function GetDays() {
    var dropdt = new
    Date(document.getElementById("drop_date").value).getTime();
    var pickdt = new
    Date(document.getElementById("pick_date").value).getTime();

    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));

  }
  document.getElementById("drop_date").addEventListener("change", function() {
    if (document.getElementById("drop_date").value) {
      document.getElementById("numdays2").value = GetDays();
    }
  })
  document.getElementById("pick_date").value = new Date().toISOString().slice(0, 10);

}

.container1 {
  text-align: center;
  margin-top: 200px;
  font-size: 30px;
  padding: 30px;
  transform: perspective(1px) translateY(-50%);
}

.textbox {
  width: 300px;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.textbox {
  border-color: dodgerblue;
  box-shadow: 0 0 8px 0 blue;
}

.form {
    padding-bottom: 10px;
    display: block;
}

body {
  background-color: #fff;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div id="reserve_form" class="container1">

    <div id="pickup_date">
      <p>
        <label class="form">Todays Date:</label>
        <input type="date" class="textbox" id="pick_date" name="pickup_date" disabled onchange="cal()">
      </p>
    </div>

    <div id="dropoff_date">
      <p>
        <label class="form">Dropoff Date:</label>
        <input type="date" class="textbox" id="drop_date" name="dropoff_date" />
      </p>
    </div>

    <div id="numdays">
      <label class="form">Number of days:</label>
      <input type="text" class="textbox" id="numdays2" name="numdays" />
    </div>

  </div>
</body>

</html>

HTML and CSS centering and applying space

2 Answers2