Question

我试图编写一个培训网站，我有两个问题，我不知道如何修复。

1st：左侧的3个按钮（.side-buttons）应位于窗口高度的中间（垂直）。

第二：有一个.headline div包含一个.svg元素和一个应该堆叠起来并位于该.svg元素中间的标题。我想过制作.svg元素position: relative;并将标题赋予position: absolute;，但我不知道如何在未定义高度时将其居中。我该怎么做呢？或者有更简单的方法吗？

现在看起来如何（不要看字体大小，我稍后会更正）

它应该如何：

body, html {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  box-sizing: border-box;
}
.welcome-screen {
  background-color: Lightblue;
  background-size: cover;
  height: 90vh;
  margin: 3.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.side-buttons {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-buttons img {
  height: 2em;
  padding: 0.5em 0 0.5em 0.5em;
  display: block;
}
.side-buttons a {
  text-decoration: none;
}
.headline {
  display: block;
  width: 100%;
}
.headline img {
  width: 50%;
  position: relative;
}
.headline h1 {
  position: absolute;
  z-index: 99;
}
nav {
  text-align: center;

}
nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
.headline {
  text-align: center;
}

.intro-section {
  height: 300px;
  background-color: grey;
}

<body>
<!-- header section -->
  <!-- side buttons -->
  <div class="side-buttons">
    <a href="http://pinterest.com/">
      <img src="http://placehold.it/40x40" alt="pinterest icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placehold.it/40x40" alt="facebook icon">
    </a>
    <a href="http://twitter.com/">
      <img src="http://placehold.it/40x40" alt="twitter icon">
    </a>
  </div>
  <!-- end of side buttons -->
  
<section class="welcome-screen">
  <div class="headline">
    <h1>The time is</h1>
    <img src="css/assets/now.svg" alt="now">
  </div>

  <nav>
    <a href="">intro</a>
    <a href="">gallery</a>
    <a href="">services</a>
    <a href="">contact</a>
  </nav>
</section>
<!-- end of header section -->

<section class="intro-section">

</section>

</body>

Answer 1

使用position

更改img中的h1

.headline img {
  width: 50%;
  position: absolute;
}
.headline h1 {
  position: relative;
  z-index: 99;
}

Answer 2

制作body display: flex;，并将.welcome-screen设置为flex-grow: 1;，左侧的图标将垂直居中。然后在flex-wrap: wrap;上设置body，在width: 100%;设置.intro-section以便该部分显示在.welcome-screen下方。然后将position: relative添加到.headline并将top: 50%; left: 50%; transform: translate(-50%,-50%);添加到h1，它将以svg为中心。

body, html {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-wrap: wrap;
}
.welcome-screen {
  background-color: Lightblue;
  background-size: cover;
  height: 90vh;
  margin: 3.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.side-buttons {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-buttons img {
  height: 2em;
  padding: 0.5em 0 0.5em 0.5em;
  display: block;
}
.side-buttons a {
  text-decoration: none;
}
.headline {
  display: block;
  width: 100%;
  position: relative;
}
.headline img {
  width: 50%;
  position: relative;
}
.headline h1 {
  z-index: 99;
  margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
nav {
  text-align: center;

}
nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
.headline {
  text-align: center;
}

.intro-section {
  height: 300px;
  background-color: grey;
  width: 100%;
}

<body>
<!-- header section -->
  <!-- side buttons -->
  <div class="side-buttons">
    <a href="http://pinterest.com/">
      <img src="http://placehold.it/40x40" alt="pinterest icon">
    </a>
    <a href="http://facebook.com/">
      <img src="http://placehold.it/40x40" alt="facebook icon">
    </a>
    <a href="http://twitter.com/">
      <img src="http://placehold.it/40x40" alt="twitter icon">
    </a>
  </div>
  <!-- end of side buttons -->
  
<section class="welcome-screen">
  <div class="headline">
    <h1>The time is</h1>
    <img src="css/assets/now.svg" alt="now">
  </div>

  <nav>
    <a href="">intro</a>
    <a href="">gallery</a>
    <a href="">services</a>
    <a href="">contact</a>
  </nav>
</section>
<!-- end of header section -->

<section class="intro-section">

</section>

</body>

将堆叠的绝对元件+居中柔性柱垂直居中到窗口高度

2 个答案: