I am presenting a figure that includes an image along with a caption. Here is the code for reference:
<figure class="figure">
<img src="../img/atmpressure.svg" class="figure-img img-fluid" alt="pressue plot">
<figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
</figure>
https://i.sstatic.net/hsWCT.png
While styling my webpage using Bootstrap 4, I encountered an issue with centering both the image and the caption within the figure element. Despite applying the text-center class to the caption, I faced challenges in horizontally centering the image itself. The classes mx-auto and text-center did not yield the desired result when used on the image within the figure (as demonstrated below).
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- MathJax used to display equations -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}, CommonHTML: {scale: 130} });
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<p>In dolorum elit ratione velit nesciunt aliquid Vitae culpa exercitationem animi ex quis praesentium Fuga sapiente deserunt dignissimos quia nihil officiis. Labore quibusdam molestiae nostrum.</p>
<figure class="figure text-center">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" class="figure-img img-fluid mx-auto d-block" alt="pressure plot">
<figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>Do you have any suggestions on how to horizontally center the entire figure within the column?