时间戳

首页 > 解决方案 > 如何将标题对齐到图像上方？

html - 如何将标题对齐到图像上方？

问题描述

我正在尝试自学 HTML 和 CSS，但我似乎不知道如何在图像上方制作标题。我正在尝试建立一个行星旋转的 gif 展示柜，到目前为止我有地球。我想将“地球”这个词放在 gif 上方。然后对所有其他行星以此类推。这是我的代码。我愿意接受有关改进和批评的建议。

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
}

.space {
  background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
  border: 1px dashed purple;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.stars1 {
  animation: space 180s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}

.stars2 {
  animation: space 240s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}

.stars3 {
  animation: space 300s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}

@keyframes space {
  40% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.25;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
<html>

<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>

<head>
  <h1 style="color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
  </style>
  <figure>
    <img src="Earth Spinning.gif" alt="Earth">
    <figcaption style="color:white;font-family:Orbitron">Earth</figcaption>
  </figure>
  <h2 style="font-family:Arial;color:white;">
    <div>
      <div style="width: 33%; float: left">
        <h3 style="color:white;font-family:Orbitron">Earth</h3>
        <a href="">
          <img class="aboutimage">
        </a>
      </div>
      ...
    </div>

</html>

标签： htmlcss

解决方案

一种非常简单的方法是将标题 divimg放在 HTML 代码中的标记上方。我已经用NOTICE THIS注释指出了以下代码片段中的更改。

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
}

.space {
  background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
  border: 1px dashed purple;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.stars1 {
  animation: space 180s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}

.stars2 {
  animation: space 240s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}

.stars3 {
  animation: space 300s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}

@keyframes space {
  40% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.25;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
<html>

<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>

<h1 style="color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>

<!---NOTICE THIS -->

<figure>
  <figcaption style="color:white;font-family:Orbitron">Earth</figcaption>
  <img src="Earth Spinning.gif" alt="Earth">
</figure>

<!---NOTICE THIS -->

<h2 style="font-family:Arial;color:white;">
  <div>
    <div style="width: 33%; float: left">
      <h3 style="color:white;font-family:Orbitron">Earth</h3>
      <a href="">
        <img class="aboutimage">
      </a>
    </div>
    ...
  </div>
</h2>

</html>

推荐阅读