Question

目前我正在为我的网站登录设计工作，而且我正在努力完全集中我的工作（横向）。我已经尝试了我能想到的一切，（左：50％），（保证金：0自动;）和其他一些东西，我似乎没有多少运气！如果你可以帮助我，我会非常感激，我非常感谢。我知道这可能是一个简单的解决方案，但作为编码社区的一个相对较新的人，我将非常感谢一些帮助。

如果您有可能完全居中物品，我在下面提供了一个jsfiddle。谢谢，

大卫。

https://jsfiddle.net/p62jnu5s/

    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 {
    position: absolute;
    top: 40%;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 35px;
    transition: 500ms all ease;
    border: 1px solid #333;
    left: 50%;
}
.username:hover {
    box-shadow: 0px 0px 4px #000;
}
.password {
    position: absolute;
    top: 45%;
    background: #333;
    color: #ccc;
    width: 150px;
    padding: 6px 15px 6px 35px;
    transition: 500ms all ease;
    border: 1px solid #333;
    left: 50%;
}
.password:hover {
    box-shadow: 0px 0px 4px #000;
}

Answer 1

您的标记也需要一些调整。尝试将表单元素放在div中。你可以先定位外部div。然后处理在LoginBox中定位元素。很少有你想要或需要的位置：绝对。尝试并远离它，直到你完全理解它。您可以对CSS进行大量调整，但我在下面所做的更改将帮助您开始。

您还应该在所有标记之前声明doctype：

<!DOCTYPE html>

另外将所有内容都包装在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;
}
.username:hover {
    box-shadow: 0px 0px 4px #000;
}
.password {
    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 {
    width: 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;
}

并将您的标记更改为：

<!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">
    <input type="text" name="" class="username" placeholder="Username">
    <input type="password" name="" class="password" placeholder="Password">
    <a class="Login">Login</a>
 </div>

</body>
</html>

Answer 2

更改了你的html结构和css。

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

请参阅此小提琴https://jsfiddle.net/zm8mps6q/1/

Answer 3

解决方案1： 在 LoginBox 类中写入输入字段，并通过css代码（text-align：center）对其进行居中。 解决方案2： 在标签内写下所有内容。 解决方案3： 像使用Bootstrap一样。它的网格系统将为您完成一半代码。

Div不完全居中

3 个答案: