HTML和CSS居中和应用空间

我有此HTML和CSS代码：

.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>

我将如何在文本和文本框之间提供一些空间。我仍然需要以中心为中心，但需要一些空间才能使阴影看起来不错。

另外，我如何对齐每个文本框上方的文本而不是在左边？

我最近启动了HTML和CSS编码，这对我来说都是新的，但非常有趣！

谢谢

另外，我如何对齐每个文本框上方的文本而不是在左边？

使container1 A 列Flexbox 中的每个部分的包装器，然后添加align-items: center以水平对齐。还将margin添加到textbox-请参见下面的演示：

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>

这是更新的小提琴：

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>

相关内容

最新更新

热门标签：