I'm trying to position the heading, sub-heading and body over an image. I want all 3 to be aligned to the center, however I am having issue when trying to align the items to the top. What is the best approach to do this?
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="Container" >
<figure >
<img src="https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772243_960_720.jpg"
<figcaption >
<h1 id="Heading" style="margin-bottom: -20%; text-align: left;"> This is a heading</h1>
<h2 id="Subheading" style="margin-top: -20%;">This is a sub heading</h2>
<p>This is the body text</p>
</figcaption>
</figure>
</div>
</body>
</html>
CodePudding user response:
Use position: absolute
for figcaption
.fig {
position: relative;
}
.fig figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="Container" >
<figure >
<img src="https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772243_960_720.jpg" />
<figcaption >
<h1 id="Heading"> This is a heading</h1>
<h2 id="Subheading">This is a sub heading</h2>
<p>This is the body text</p>
</figcaption>
</figure>
</div>
</body>
</html>