Question

CSS的新手，请多多包涵。我正在尝试在HTML / CSS中垂直堆叠不同的项目，并且无法让它们以自定义间距垂直堆叠。这是我到目前为止所拥有的。

<p id="loginView">
        <input type="text" id="usernameField">
        <div></div>
        <input type="password" id="passwordField">
        <button id="loginButton">Login</button>
</p>


#loginView {
    text-align: center;
}

输出是水平查看的所有字段，用户名，密码和按钮。我正在尝试将它们垂直堆叠并正确居中。

Here is what I currently have

Answer 1

您不能将<div>放在p标签内。
您可以像这样将#loginView的所有子级更改为display:block：

#loginView {
  text-align: center;
}

#loginView>* {
  display: block;
}

<div id="loginView">
  <input type="text" id="usernameField" />
  <div></div>
  <input type="password" id="passwordField" />
  <button id="loginButton">Login</button>
</div>

其他：为了使内容居中并以一种深刻的方式对齐，我建议使用flexbox，它很容易并且可以用于许多其他事情：

https://yoksel.github.io/flex-cheatsheet/

Answer 2

尝试使用dispaly: flex;使项目垂直对齐。我也建议您使用类而不是ID来引用CSS样式。这是示例代码。希望对您有帮助

HTML

<div class="d-flex flex-column align-items-start justify-content-center">
  <input class="m-2" type="text" id="usernameField" />
  <input class="m-2" type="password" id="passwordField" />
  <button class="m-2" id="loginButton">Login</button>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-start {
  align-items: flex-start;
}

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

.m-2 {
  margin: 0.5rem;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/dwkxo1va/

Answer 3

您应该使用语义HTML

.formWrapper {max-width: 400px; margin:0 auto;}
.text-center {
  text-align: center;
}

input {width: 100%;margin-bottom: 10px;}

<form class="formWrapper">
  <div class="form-group">
    <input type="text" id="usernameField">
  </div>
  <div class="form-group">
    <input type="password" id="passwordField">
  </div>
  <div class="form-group text-center">
    <button id="loginButton">Login</button>
  </div>
</form>

Answer 4

您也可以将<br>标签放在<p>中的每个元素之间：

    <p id="loginView">
        <input type="text" id="usernameField">
        <br>
        <input type="password" id="passwordField">
        <br>
        <button id="loginButton">Login</button>
   </p>

如何在CSS / HTML中垂直堆叠不同的元素？

4 个答案: