Question

我正在尝试将一些<h1></h1>文本和一个来自Angular Material的电子邮件表单放入具有彩色背景的<div></div>部分的中心。物品堆叠在一起，好像它们是层。电子邮件表单必须位于<h1></h1>标记下方。我能够正确对齐的唯一方法是使用position:flex，我怀疑这是潜在的原因。

这是我的html和css：

<div class="top-section">

  <h1 class="top-h1">
    mytitle
  </h1>

  <md-input-container class="email-form" color="accent">
    <input mdInput placeholder="Email us" value="Your email address">
  </md-input-container>

</div>


.top-section {
  height: 350px;
  background-color: #04041b;
  align-items: center;
  display: flex;
  justify-content: center;
}

.top-h1 {
  color: #E8E8E8;
  font-size: 60px;
  position: absolute;
}

.email-form {
  color: white;
  font-size: 30px;
}

有什么想法吗？

Answer 1

您在position: absolute上使用h1，将flex-direction从页面流中移除，并将其相对于其最近的父级定位。所以其他元素不会在它周围流动。删除它。然后，您的项目将并排显示，因为Flex父级的默认row为flex-direction: column。要垂直显示项目，请使用.top-section { height: 350px; background-color: #04041b; align-items: center; display: flex; justify-content: center; flex-direction: column; } .top-h1 { color: #E8E8E8; font-size: 60px; } .email-form { color: white; font-size: 30px; }，这些项目将在一列中相互堆叠而不是并排排列。

＆＃13;

<div class="top-section">

  <h1 class="top-h1">
    mytitle
  </h1>

  <md-input-container class="email-form" color="accent">
    <input mdInput placeholder="Email us" value="Your email address">
  </md-input-container>

</div>

＆＃13;

Collections.max()

＆＃13;

Answer 2

我想这可能是因为position设置为absolute时<div class="container"> <h1>Example</h1> <div class="form">  </div> </div> .container { height: 350px; background-color: #E0E0E0; width: 100%; margin: auto; text-align: center; } .form { width: 100%; margin: auto; }。{/ p>

创建类似以下的内容，它应该解决您的问题：

HttpRequest

这应该做你想要的。如果我误解了这个问题，请回复，我可以调整我的回复，但这是我从你想要的元素不要堆叠，并且表格位于h1下但保持居中。

为了将来参考，如果您需要对齐div，请给它一个宽度，然后使用margin：auto;

祝你好运。

CSS Flex堆叠项目彼此之上

2 个答案: