Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果要做的只是水平对齐项目并将徽标放在右侧，则可以将所有项目包裹在块元素中，例如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;
}

Answer 2

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

请查看下面的代码段。

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>

Answer 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无关紧要，因此已被删除。

希望这有帮助！：）

使用flex定位元素

3 个答案: