如何调整网页图片位置？请求协助将GIF居中于标题正下方

Hey there! I took a look at your code and spotted a couple of small issues that are causing your GIF to be misaligned with the "Space" title. Let's get this sorted out step by step.

What's Going Wrong Right Now? #

Your .earth_figure class uses flex-direction: column-reverse, which flips the order of your image and the "Earth" caption (putting the caption above the image instead of below it). Also, the figure container itself isn't set to center on the page, so it's not lining up with your centered <h1> title.

Here's How to Fix It #

Let's adjust the CSS and clean up your HTML a bit:

1. Update the .earth_figure CSS

Replace your existing .earth_figure style with this:

.earth_figure {
  display: flex;
  flex-direction: column; /* Keeps the image above the caption (your original order) */
  align-items: center; /* Centers the image and caption inside the figure */
  margin: 0 auto; /* Centers the entire figure container on the page */
}

2. Add Small Improvements for Better Layout

• Add margin: 0 to your body style to remove default browser spacing that can mess up your full-screen background.
• Add z-index: -1 to the .space class to make sure your stars background stays behind your text and image (no more accidental blocking).
• Add a margin-bottom to your <h1> to create some breathing room between the title and the GIF.
• Fix the unclosed <h2> tag in your HTML (either close it or remove it if you don't need it).

Full Modified Code #

CSS (Space 2.css)

body { 
  background: radial-gradient(circle at bottom, navy 0, black 100%); 
  height: 100vh; 
  overflow: hidden; 
  margin: 0; /* Remove default body margin */
}
.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; 
  z-index: -1; /* Send stars behind content */
}
.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)); 
}
.earth_figure { 
  display: flex; 
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
@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

<!DOCTYPE html>
<html>
<head>
<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<style> @import url('https://fonts.googleapis.com/css2?family=Orbitron&amp;display=swap'); </style>
</head>
<body>
<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%;margin-bottom:20px;">Space</h1>
<figure class="earth_figure">
<img src="Earth Spinning.gif" height="329" width="329" alt="Earth">
<figcaption style="color:white;font-family:Orbitron;font-size:150%">Earth</figcaption> <!-- Adjusted font size for better balance -->
</figure>
<!-- Removed the unclosed <h2> since it wasn't being used -->
</body>
</html>

Quick Notes #

• The z-index: -1 on .space ensures your starry background doesn't cover your text or image.
• I adjusted the caption's font size to 150% so it doesn't overpower the GIF—feel free to tweak that number to your liking.
• The margin-bottom:20px on the <h1> creates a nice gap between the title and the GIF, but you can change the value to make it bigger or smaller.

After making these changes, your spinning Earth GIF will be perfectly centered directly below the "Space" title. Happy coding!

内容的提问来源于stack exchange，提问作者Enzie