Question

我正在创建一个网站，我有一个包含两个输入的登录字段。我想在DIV中垂直对齐这些项目。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Instagram tweaks</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <p>INSTATWEAKS</p>
    </header>
    <div class="loginbar">
        <input type="text"    name="username" id="username" class="input">
        <input type="password" name="password" id="password" class="input">
    </div>
</body>
</html>

CSS：

.loginbar {
    width: 800px;
    height: 400px;
    box-sizing: border-box;
    margin: auto auto;
    display: block;
    box-shadow: 0 0 10px black;
    color: orange;
    margin-top: 200px;
}

header {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #111;
    position: absolute;
    top: 0;
}

body {
    margin: 0;
    padding: 0;
}

.input {
    font-size: 22px;
    vertical-align: text-top;
    text-align: center;
}

p {
    font-size: 30px;
    color: lightblue;
    margin-top: 10px;
    font-weight: bold;
}

我希望div中带有“loginbar”类的输入是垂直居中的

Answer 1

使用diplay：flex

https://codepen.io/Czeran/pen/mMWNwP

.loginbar {
    width: 800px;
    height: 400px;
    box-sizing: border-box;
    margin: auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px black;
    color: orange;
    margin-top: 200px;
}

Answer 2

您需要将输入字段包装在容器元素中，然后使用flexbox垂直对齐容器并使其居中：

.loginbar {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

JSFiddle演示：https://jsfiddle.net/092215c2/1/

Answer 3

由于你有.loginbar的设置高度，你可以给它一个具有相同值的行高，然后给.input {vertical-align：middle; }。如果您想要水平对齐，请在两个输入周围为您的html添加另一个div。给这个div一个设定的宽度，我用530px，这是关于彼此旁边的两个输入是什么，然后给div余量：0 auto;

这样，输入完全居中。

删除代码以实现您想要的效果。

最佳，列维

＆＃13;

.loginbar {
  width: 800px;
  height: 400px;
  box-sizing: border-box;
  margin: auto auto;
  display: block;
  box-shadow: 0 0 10px black;
  color: orange;
  margin-top: 200px;
  line-height: 400px;
}

header {
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: #111;
  position: absolute;
  top: 0;
}

body {
  margin: 0;
  padding: 0;
}

.center {
  width: 530px;
  margin: 0 auto;
}

.input {
  font-size: 22px;
  text-align: center;
  vertical-align: middle;
}

p {
  font-size: 30px;
  color: lightblue;
  margin-top: 10px;
  font-weight: bold;
}

＆＃13;

<header>
        <p>INSTATWEAKS</p>
    </header>
    <div class="loginbar">
      <div class="center">
        <input type="text"    name="username" id="username" class="input">
        <input type="password" name="password" id="password" class="input">
      </div>
    </div>

＆＃13;

Answer 4

.textField-center {
    margin: auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

OR

.textField-center {
    justify-content: center;
}

使用此CSS

如何垂直对齐DIV中的输入

4 个答案: