1
最近私は、私のdivをページの中央に水平に整列させるのに役立つ人がいるかどうかを知るために投稿を作成しました。いくつかの微調整の後、私はLoginBoxを私が必要としていた場所に垂直に整列させることができましたが、悲しいことに、UsernameセクションとPasswordセクションを移動したい場所に移動できないようです。これはおそらく非常に簡単だと理解していますが、コーディングにかなり新しい人として、私が何かを理解していないと助けとサポートを見たいと思っています。私は以下のソースコードを提供しました。 jsfiddleそれが必要ですincase。 https://jsfiddle.net/BeastFox/36vet66q/divをセンタリングした後で要素を移動できない
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="LoginBox" style="">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</body>
</html>
そして、ここでのCSSです。
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
}
デビッド 、最も心から
あなたの、あなたは私を提供することができます任意の助けてくれてありがとう。