堆棧內存溢出
  簡體   English   中英

在父div內居中輸入

[英]Center inputs inside a parent div

 原文  2017-10-06 10:08:05  9   4    javascript/ jquery/ html/ css/ css3

問題描述

我放棄了，來到這里尋求幫助。

我正在嘗試將這個div的內部對齊，以便在確切的中間對齊：

圖片

（紅色邊框只是為了讓我可以看到每個項目的布局...） 

 body { margin: 0; padding: 16px; } @font-face { font-family: "Product Sans"; font-style: normal; font-weight: normal; src: url("ProductSans-Regular.woff") format("woff"); } .form { background-color: grey; background-color: rgba(66, 66, 66, 0.7); border: 1px solid transparent; border: 1px solid red; border-radius: 25px; color: #FFFFFF; font: 1em "Product Sans"; left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); } .textInput { background-color: transparent; border: none; border: 1px solid red; border-bottom: 2px solid transparent; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .textInput:focus { border-bottom: 2px solid rgba(255, 138, 128, 0.7); } .textInput:invalid { box-shadow:0 0 0 transparent; } .submit { background-color: transparent; border: 2px solid rgba(255, 138, 128, 0.7); border: 1px solid red; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .submit:hover { background-color: rgba(255, 138, 128, 0.7); border: 2px solid transparent; } 
 <!DOCTYPE html> <html> <head> <title>Beautiful login - made with <3, PHP, CSS and HTML</title> <meta charset="utf-8" /> <link type="text/css" href="StyleSheet.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="form"> <form action="/index.php" method="post"> <input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required /> <br /> <input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required /> <br /> <button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button> </form> </div> <script> var screenWidth = $(window).width(); var screenHeight = $(window).height(); $(".form").css("width", screenWidth / 3); $(".form").css("height", screenHeight / 3 + 32); $(".textInput").css("width", screenWidth / 4) $(".submit").css("width", screenWidth / 4); var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water"; $("body").css("background-image", "url(" + URL + ")"); </script> </body> </html>

如您所見，我設法將大的，灰色的，圓角的矩形居中，但是對於內容，相同的方法無效。

4 個解決方案

解決方案1
 3 已采納  2017-10-06 10:11:23

您可以將這三個屬性添加到.form類中，以實現內容的垂直居中： 

display: flex;
flex-direction: column;
justify-content: center;


 body { margin: 0; padding: 16px; } @font-face { font-family: "Product Sans"; font-style: normal; font-weight: normal; src: url("ProductSans-Regular.woff") format("woff"); } .form { background-color: grey; background-color: rgba(66, 66, 66, 0.7); border: 1px solid transparent; border: 1px solid red; border-radius: 25px; color: #FFFFFF; font: 1em "Product Sans"; left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); display: flex; flex-direction: column; justify-content: center; } .textInput { background-color: transparent; border: none; border: 1px solid red; border-bottom: 2px solid transparent; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .textInput:focus { border-bottom: 2px solid rgba(255, 138, 128, 0.7); } .textInput:invalid { box-shadow: 0 0 0 transparent; } .submit { background-color: transparent; border: 2px solid rgba(255, 138, 128, 0.7); border: 1px solid red; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .submit:hover { background-color: rgba(255, 138, 128, 0.7); border: 2px solid transparent; } 
 <!DOCTYPE html> <html> <head> <title>Beautiful login - made with <3, PHP, CSS and HTML</title> <meta charset="utf-8" /> <link type="text/css" href="StyleSheet.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="form"> <form action="/index.php" method="post"> <input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required /> <br /> <input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required /> <br /> <button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right">Submit</button> </form> </div> <script> var screenWidth = $(window).width(); var screenHeight = $(window).height(); $(".form").css("width", screenWidth / 3); $(".form").css("height", screenHeight / 3 + 32); $(".textInput").css("width", screenWidth / 4) $(".submit").css("width", screenWidth / 4); var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water"; $("body").css("background-image", "url(" + URL + ")"); </script> </body> </html>

解決方案2
 2  2017-10-06 10:10:39

如果您希望輸入的文本內容居中，則只需使用css text-align:center 

 .textInput {
   text-align:center
 }


 body { margin: 0; padding: 16px; } @font-face { font-family: "Product Sans"; font-style: normal; font-weight: normal; src: url("ProductSans-Regular.woff") format("woff"); } .form { background-color: grey; background-color: rgba(66, 66, 66, 0.7); border: 1px solid transparent; border: 1px solid red; border-radius: 25px; color: #FFFFFF; font: 1em "Product Sans"; left: 50%; position: absolute; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); } .textInput { background-color: transparent; border: none; border: 1px solid red; border-bottom: 2px solid transparent; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align:center; } .textInput:focus { border-bottom: 2px solid rgba(255, 138, 128, 0.7); } .textInput:invalid { box-shadow:0 0 0 transparent; } .submit { background-color: transparent; border: 2px solid rgba(255, 138, 128, 0.7); border: 1px solid red; box-sizing: border-box; padding: 16px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .submit:hover { background-color: rgba(255, 138, 128, 0.7); border: 2px solid transparent; } 
 <!DOCTYPE html> <html> <head> <title>Beautiful login - made with <3, PHP, CSS and HTML</title> <meta charset="utf-8" /> <link type="text/css" href="StyleSheet.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="form"> <form action="/index.php" method="post"> <input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required /> <br /> <input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required /> <br /> <button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button> </form> </div> <script> var screenWidth = $(window).width(); var screenHeight = $(window).height(); $(".form").css("width", screenWidth / 3); $(".form").css("height", screenHeight / 3 + 32); $(".textInput").css("width", screenWidth / 4) $(".submit").css("width", screenWidth / 4); var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water"; $("body").css("background-image", "url(" + URL + ")"); </script> </body> </html>

解決方案3
 0  2017-10-06 10:14:51

好吧，您並沒有真正將方法應用於內容:)。 您可以完全按照將外部.form div居中的相同方式居中。 將此添加到您的CSS應該工作： 

form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

解決方案4
 0  2017-10-06 10:26:13

要使內容在垂直和水平方向上居中，請在表單中添加以下樣式： 

.form{
display: flex;
flex-direction: column;
align-items: center;
justify-contents: center;
}

並將整個表單放置在頁面中間，而不必完全定位表單並給出top：50％，請將其包裝在高度為100vh的容器中，例如： 

.container{
height: 100vh;
display: flex;
align-items: center;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用JavaScript將div置於父div的中心 如何將縮小的 div 放在父 div 的中心內 父div中的中心3 div 中心div內含文字 在父 div 中居中多個 div 定位div中的所有輸入 遍歷 div 內的輸入 在Div內選擇輸入的問題 將子div設置為父div的中心 子div將父div的居中對齊與溢出？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM