在引导程序中居中带有图像和浮动文本的框答案

【问题标题】：Center a box with image and floating text in bootstrap在引导程序中居中带有图像和浮动文本的框
【发布时间】：2018-10-29 11:30:41
【问题描述】：

如何将一个带有图片和两个标题的框居中？

  <div class="py-1 py-sm-5">
    <div class="box">
      <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
      <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
      <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
    </div>
  </div>

目前，所有内容都在左侧屏幕上对齐，但我希望它居中。不，使用 2 x "col-6" 不是解决方案，因为它不会真正居中。

【问题讨论】：

你能把你的代码放在 jsfiddle 或 codepen 中吗？以及指向实际图片或尺寸相似的图片的链接？

标签： html css bootstrap-4

【解决方案1】：

将容器设置为flex显示并将justify-content设置为center。

<div class="py-1 py-sm-5 d-flex justify-content-center">
  <div class="box">
    <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
    <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
    <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
  </div>
</div>

【讨论】：

这需要工作。我想要以图像右侧的文本为中心的框，而不是上方。