将 div 对齐到 body 的顶部答案

【问题标题】：Aligning div to top of body将 div 对齐到 body 的顶部
【发布时间】：2021-09-20 20:12:52
【问题描述】：

我目前有这个设计

如您所见，jumbotron（boostrap v5）在中心对齐，但我希望它接触到身体的最顶部。我尝试过使用边距、显示和对齐，但似乎无法解决。

这是目前为止的代码：

body {display: flex; 
 align-items: center;
 padding-top: 40px;
 padding-bottom: 40px;
 background-color: #f5f5f5;
  }

.jumbotron {
  padding: 2rem 1rem;
  margin: 0 auto;
  width: 100%;
  background-color: #e9ecef;
  border-radius: .3rem;
  }

如果我删除 body 的 align-items:center，jumbotron 会在顶部对齐，但由于某种原因，它的高度会增加，几乎占据了整个身体。为什么会这样？我怎样才能保持 jumbotron 的大小，因为它显示在附加的图像中，但让它在最顶部对齐？

谢谢！

【问题讨论】：

你能分享你的 HTML 吗？

标签： html css frontend bootstrap-5

【解决方案1】：

您可以删除正文上的align-items: center; 并将align-self: flex-start; 添加到您的jumbotron。或者只是不使用 display flex，如果 jumbotron 是第一个项目，它将位于页面顶部。

body {
  display: flex;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.jumbotron {
  align-self: flex-start;
  padding: 2rem 1rem;
  margin: 0 auto;
  width: 100%;
  background-color: #e9ecef;
  border-radius: .3rem;
}

【讨论】：