Question

最近我发了帖子，看看是否有人能够帮助我将div重新对齐到我的页面中心。经过一些调整之后，我能够将我的LoginBox垂直对齐到我需要它的地方但遗憾的是，我似乎无法将用户名部分和密码部分移动到我想要去的地方，我将不胜感激任何支持我知道这可能很容易实现，但作为一个对编码很陌生的人，我喜欢看到帮助和支持，如果我不理解某些东西，我提供了下面的源代码，我还提供了一个需要它的jsfiddle。 What's Wrong With Turkey?

<!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;
}

感谢您提供的任何帮助，

你最诚挚的，大卫。

Answer 1

您可以将LoginBox内容与...对齐

将内容包装在新div中。
将flexbox属性添加到LoginBox，这将定位新的div。

fiddle

＆＃13;

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;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Login {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #FFF;
  margin-bottom: 1em; /* create space between 'Login' and inputs */
}

＆＃13;

<div class="LoginBox" style="">
  <div class="LoginBox-inner">
    <a class="Login">Login</a>
    <input type="text" name="" class="username" placeholder="Username">
    <input type="password" name="" class="password" placeholder="Password">
  </div>
</div>

＆＃13;

Answer 2

稍微更改了你的CSS。在字段中添加了包装元素。将父元素（LoginBox）设置为display:table，将element_wrapper设置为display:table-cell;。然后垂直对齐element_wrapper。

<div class="element_wrapper">
 <a class="Login">Login</a>
 <input type="text" name="" class="username" placeholder="Username">
 <input type="password" name="" class="password" placeholder="Password">
</div>

请参阅此小提琴doesn't compile with clang 3.8.0 and g++ 6.3.0

在居中div后无法移动元素

2 个答案: