Having trouble with getting caption under image-CodePudding

 <!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
    </head>
    <body>

    <figure>
    <img class = "image" src ="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
    The Campaign Image For The New Call Of Duty
    </figcaption>
    </figure>   
    
    </body>
</html> 

.image{
 width: 600px;
 position: absolute;
left: 600px;
 }

I've tried using figcaption and other methods to get the text under the image but I'm unsure how.

CodePudding user response：

I sort of re-worked your HTML a bit to get your desired result. I added a .container to give the fig-caption elements a parent. Check the CSS changes below.

.container > img,
h4 {
  text-align: center;
  width: 100%;
  margin-top: -.1rem;
}
.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

img {
  width: 400px;
  height: 300px;
  padding: 0;
}

<!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
    </head>
    <body>
<div class="container">
  <div class="fig-caption">
    <img class="image" src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <h4>
       The Campaign Image For The New Call Of Duty
    </h4>
  </div>
</div>
    </body>
</html>

CodePudding user response：

I wrapped figure inside a container.

img {
  width: 600px;
}
figure {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  margin: 0.5em;
  padding: 0.5em;
}

img.scaled {
  width: 100%;
}

<div class="container">
  <figure>
    <img src="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg" alt="Eiffel tower">
    <figcaption>The Campaign Image For The New Call Of Duty</figcaption>
  </figure>
</div>

CodePudding user response：

You can set the size of the image, but position the figure, like this:

<!DOCTYPE html>
<html>
    <head>
    <link href= "D:\Documents\Coding\html-css practice.css" rel = "stylesheet" type= "text/css">
        <title>Cod vanguard review</title>
        
        <style>
       .image{
            width: 600px;
        }
        .figure {
            position: absolute;
            left: 600px;
        }
        </style>
    </head>
    <body>

    <figure class="figure">
    <img class = "image" src ="https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/vgd/VGD-Campaign-Overview-TOUT.jpg">
    <figcaption>
    The Campaign Image For The New Call Of Duty
    </figcaption>
    </figure>   
    
    </body>
</html>