Menu
I have a figure containing an image and caption as shown below:
<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>
I am using Bootstrap 4 to style the web page. Using the text-center class for the caption, I'm able to center the caption text. I would also like to center the image in the figure. The mx-auto and text-center classes do not work when the image is within a figure (see example 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>Elit ratione dolorum velit nesciunt aliquid Vitae culpa exercitationem ex animi quis praesentium Fuga sapiente dignissimos deserunt quia officiis nihil. Vero dignissimos excepturi iste ut fugiat! Nostrum quibusdam labore molestiae.</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="pressue plot">
<figcaption class="figure-caption text-center">Plot of pressure at different altitudes.</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>How can I horizontally center the entire figure in the column?
659
The problem is two fold. Your original issue was that you only had .text-center on the figcaption. To center the img and figcaption in the figure, move .text-center to figure instead and that will center the inline img and text in the figcaption horizontally.
Then when you said that didn't work and included the context of the rest of the page, turns out you're wanting the figure to be centered relative to the content around it, too. figure has class .figure, which adds display: inline-block; so it will be left aligned in the .col by default. The easiest way to center the contents of the figure relative to the content outside of the figure is to either remove the .figure class so the element can be it's native display: block and .text-center will center it's contents, or you can add the class .d-block to the figure if you want to retain the .figure class.
<!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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<p>Elit ratione dolorum velit nesciunt aliquid Vitae culpa exercitationem ex animi quis praesentium Fuga sapiente dignissimos deserunt quia officiis nihil. Vero dignissimos excepturi iste ut fugiat! Nostrum quibusdam labore molestiae.</p>
<figure class="text-center">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" class="figure-img img-fluid" alt="pressue plot">
<figcaption class="figure-caption">Plot of pressure at different altitudes.</figcaption>
</figure>
</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
