How do I align a caption to be above an image?
Question
I'm trying to teach myself HTML and CSS but I can't seem to find out how to make a caption to be above an image. I'm trying to build a gif showcase of pl.nets spinning, I have earth so far. I want to position the word "Earth" above the gif. and then so on for all the other pl.nets. Here is my code. I am open to suggestions on improvements and criticism.
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>
1 answers
solution1
0 2020-08-18 08:53:46
One very simple way is to just place the caption div above the img tag in your HTML code. I have pointed out the change in the following code snippet with NOTICE THIS comments.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to align caption to image?
How do I align text in exact center with image above
How can I align this Wordpress image caption with the top of the image?
How to align caption underneath image
How do I align a banner above buttons
How do I align a picture and its caption horizontally within 3 columns
How do I display a caption with an enlarged image?
how do I make a container with an image and caption
How to vertically align a rotated image caption?
In Bootstrap, how do I left align my button with the element above?
Related Tags