引导 4 中心(水平)图像 + div 内的文本

Question

Bootstrap 4：
如何将包含图像和文本的div水平居中到图像右侧？

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|     | Heading                     |
+ IMG +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|     | Lead                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

我尝试在一行内制作三列，

<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>

但问题是标题太长并且绕到下一行。如果我使中间列变大，它就不再居中。无论文本长度如何，我都需要它居中。

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
<div class="col-3">
<img src="https://pixlr.com/photo/image-design-11-1-pw.jpg" style="width: 100%;height: 100%;" />
</div>
<div class="col-9">  
<h5>Hello World</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
</div>
</div>

Answer 2

我想通了。

<div class="row">
<div class="col-12 d-flex flex-row justify-content-center">
<img src="..." width="..." height="..." />
<div>
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
</div>
</div>

Answer 3

试试这段代码

<div class="text-center">
<div class="row justify-content-md-center">
<div class="col-md-auto">
<img src="https://placehold.it/100x100">
</div>
<div class="col-md-auto">
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
</div>
</div>

此处的工作演示：https://www.bootply.com/UHz1ACh2CI