0
私はあきらめて、助けに来ました。 （赤いボーダーがちょうどので、私は...各項目のレイアウトを見ることができます）親部門内のセンター入力
：
私はこれの内部を揃えるためにしようとしているが、正確な中間にそうthatsのをDIV
body {
margin: 0;
padding: 16px;
}
@font-face {
\t font-family: "Product Sans";
\t font-style: normal;
\t font-weight: normal;
\t src: url("ProductSans-Regular.woff") format("woff");
}
.form {
\t background-color: grey;
\t background-color: rgba(66, 66, 66, 0.7);
\t border: 1px solid transparent;
\t border: 1px solid red;
\t border-radius: 25px;
\t color: #FFFFFF;
\t font: 1em "Product Sans";
\t left: 50%;
\t position: absolute;
\t text-align: center;
\t top: 50%;
\t transform: translateX(-50%) translateY(-50%);
}
.textInput {
\t background-color: transparent;
\t border: none;
\t border: 1px solid red;
\t border-bottom: 2px solid transparent;
\t box-sizing: border-box;
\t padding: 16px;
\t -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 {
\t border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}
.textInput:invalid {
\t box-shadow:0 0 0 transparent;
}
.submit {
\t background-color: transparent;
\t border: 2px solid rgba(255, 138, 128, 0.7);
\t border: 1px solid red;
\t box-sizing: border-box;
\t padding: 16px;
\t -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 {
\t background-color: rgba(255, 138, 128, 0.7);
\t border: 2px solid transparent;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Beautiful login - made with <3, PHP, CSS and HTML</title>
\t \t <meta charset="utf-8" />
\t \t <link type="text/css" href="StyleSheet.css" rel="stylesheet" />
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t </head>
\t <body>
\t \t <div class="form">
\t \t \t <form action="/index.php" method="post">
\t \t \t \t <input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required />
\t \t \t \t <br />
\t \t \t \t <input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
\t \t \t \t <br />
\t \t \t \t <button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
\t \t \t </form>
\t \t </div>
\t \t <script>
\t \t \t var screenWidth = $(window).width();
\t \t \t var screenHeight = $(window).height();
\t \t \t $(".form").css("width", screenWidth/3);
\t \t \t $(".form").css("height", screenHeight/3 + 32);
\t \t \t $(".textInput").css("width", screenWidth/4)
\t \t \t $(".submit").css("width", screenWidth/4);
\t \t \t var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
\t \t \t $("body").css("background-image", "url(" + URL + ")");
\t \t </script>
\t </body>
</html>あなたが見ることができるように、私は角の丸い、大きな、グレーを中心に管理してきました長方形であるが、同じ方法は内容に対しては機能しなかった。あなたが入力されたテキストコンテンツがセンターになりたい場合は
これは入力自体 – Martijn
従事PERFのテキストを整列します間違いなく、期限が切れたときに私は答えとしてマークします:) –