Сосредоточьте коробку с изображением и плавающим текстом в начальной загрузке

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>