使用 flex 定位元素答案

【问题标题】：Positioning elements using flex使用 flex 定位元素
【发布时间】：2018-01-15 03:06:19
【问题描述】：

这里只是一个快速的。我正在尝试使用 float:left 将徽标放置在网页的右上角，但它似乎与其余元素一起卡在页面的中心。我试图将 text-align:center 从#showcase 中移开，但我仍然得到相同的结果。

#logo h2 {
  float: left;
  color: #ffffff;
  text-decoration: line-through;
}

#showcase {
  background-image: url("../img/sky.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 20px;
  align-items: center;
}

.header p {
  float: left;
}

#showcase h1 {
  color: #ffffff;
  line-height: 1.2;
  word-spacing: 5;
  text-transform: capitalize;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 120px;
  margin-top: 150px;
}

<body>

  <header id="showcase">
    <h1>404</h1>
    <p>Oops! the page you're looking for cannot be found</p>
    <a href="#" class="button">GO BACK</a>
    <h2 id="logo">Daily UI</h2>
  </header>

</body>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

一个简单的解决方案是使用absolute position 并将徽标准确地放置在您希望的位置。另外，请注意#logo h2 不是您的徽标元素的正确选择器。你应该改用h2#logo。

请检查下面的sn-p。

h2#logo {
  text-decoration: line-through;
  position:absolute;
  top:10px;
  right:10px;
}

#showcase {
  background-image: url("../img/sky.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 20px;
  align-items: center;
}

#showcase h1 {
  line-height: 1.2;
  word-spacing: 5;
  text-transform: capitalize;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 120px;
  margin-top: 150px;
}

<body>

  <header id="showcase">
    <h1>404</h1>
    <p>Oops! the page you're looking for cannot be found</p>
    <a href="#" class="button">GO BACK</a>
    <h2 id="logo">Daily UI</h2>
  </header>

</body>

【讨论】：

感谢您的回复

【解决方案2】：

如果您只想水平对齐项目并将徽标放在右侧，您可以将所有项目包装在块元素中，例如 div 并公开 flex。

HTML

<header id="showcase">
  <div class="container">
    <h1>404</h1>
    <p>Oops! the page you're looking for cannot be found</p>
    <a href="#" class="button">GO BACK</a>
    <h2 id="logo">Daily UI</h2>
  </div>
</header>

CSS

.container {
  display: flex;
}

【讨论】：

【解决方案3】：

您的 #logo h2 选择器不会定位任何内容，因为 #logo 没有子 h2 元素。您正在寻找h2#logo 或只是#logo（您只能有一个ID 为logo 的元素，因此表示其标签毫无意义）。

至于定位，我不完全确定您为什么将 flexbox 用于右上角也需要一个独立组件的父级，但我建议使用 position: absolute 带有一个简单的 right 偏移量约为 20px。

这可以在下面看到（注意背景图片被替换了）：

#logo {
  color: #ffffff;
  text-decoration: line-through;
  position: absolute;
  right: 20px;
}

#showcase {
  background-image: url("http://placehold.it/100");
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 20px;
  align-items: center;
}

.header p {
  float: left;
}

#showcase h1 {
  color: #ffffff;
  line-height: 1.2;
  word-spacing: 5;
  text-transform: capitalize;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 120px;
  margin-top: 150px;
}

<header id="showcase">
  <h1>404</h1>
  <p>Oops! the page you're looking for cannot be found</p>
  <a href="#" class="button">GO BACK</a>
  <h2 id="logo">Daily UI</h2>
</header>

请注意，position: absolute 使 float 无关紧要，因此已将其删除。

希望这会有所帮助！ :)

【讨论】：

感谢您的回复