How to position Text Over an Image using figure and figcaption

August 12, 2022

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" class="Container"> 
    <figure class="fig">
        <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>

>Solution :

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" class="Container"> 
    <figure class="fig">
        <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>