Every solution I attempt fails to work correctly, at times I achieve centering the image but then the figcaption ends up crammed into a small corner.
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.4.1/css/bootstrap.min.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Document</title>
<style>
.custom-row {
background: linear-gradient(to bottom, #f8efef, #f7faf8);
padding:10px;
border-radius: 15px;
padding-left: 10%;
padding-right: 10%;
margin-left: 0;
margin-right: 0;
position: relative;
left:0%;
}
#fps{width:60%; }
</style>
</head>
<body>
<div class = "row custom-row">
<h3 style = "text-align: center"> Building a JavaScript first person shooter game from scratch </h3>
<a> <!-- I need this anchor tag -->
<p style = "text-decoration: none;">
example text hyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgflkuyfkutdytfkgflhblblhlijhhyhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjgjgjgkgflkuyfkutdytfkgflhblblhlijh
</p>
<figure>
<img id = "fps" src = "../static/fps.png"/>
<figcaption style = "text-decoration: none; color: inherit; display: table-caption; caption-side: bottom ;">
my figcaption text
</figcaption>
</figure>
</a>
</div>
</body>
</html>I've attempted changing my row class to:
<div class = "row custom-row justify-content-md-center">
But it has made no difference.
I've also tried using .text-center and .img-center like this:
<figure class="text-center">
<img id = "fps" class="img-center"...
This approach also proves ineffective
How can I successfully center this image?