Bootstrap 4:
Is there a way to horizontally center a div that includes both an image and text positioned to the right of the image?
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Heading |
+ IMG +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Lead |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
I attempted to create three columns within a row,
<div class="row">
<div class="col"></div>
<div class="col-auto">
<img src="..." width="..." height="..." />
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
<div class="col"></div>
</div>
However, I faced an issue where the heading text was too long and wrapped onto the next line. Adjusting the size of the middle column caused it to no longer be centered. How can I ensure that it remains centered regardless of the length of the text?