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

新手到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;
}

登录

#登录视图{
文本对齐：居中；
}

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

您不能将

放入

p

标记中

您只需将

#loginView

的所有子级更改为

display:block

，如下所示：

#登录视图{
文本对齐：居中；
}
#登录视图>*{
显示：块；
}

登录

您也可以在

中的每个元素之间放置

标记：

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






登录

尝试使用
dispaly:flex以使项目垂直对齐。我还建议您使用类而不是id来引用css样式。这是一个示例代码。希望对你有帮助

HTML

JS Fiddle链接：
您应该使用语义HTML


.formWrapper{最大宽度：400px；边距：0自动；}
.文本中心{
文本对齐：居中；
}
输入{宽度：100%；边距底部：10px；}

登录
谢谢。但是，这适用于垂直居中..如何在loginView中的项目之间添加间距？“如何添加间距”？SE项目应限于每个问题。但是你可以查看CSS中的“margin，margin top，etc”。@Nick只需在输入中添加margin bottom，你也可以检查我下面的答案。从技术上讲，你可以这样做，但我建议避免使用换行标记（br）如果输入和按钮被定义为具有底部边距集的块级元素，那么您将获得相同的结果，同时标记也更加清晰。将这些元素放在标记中而不是段落标记中更为正确。
<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>

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