Question

我如何使一个带有图片和两个标题浮动在其中的盒子居中？

  <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”不能解决任何问题，因为它不会真正居中。

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

在引导程序中将包含图像和浮动文本的框居中

1 个答案: