堆栈内存溢出
  繁体   English   中英

在父div内居中输入

[英]Center inputs inside a parent div

 原文  2017-10-06 10:08:05  7   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