Не отображается блок по центру при изменении размера окна

148
04 мая 2019, 05:10

Столкнулся с такой проблемой: при изменении размера окна, все колонки отлично становятся в центр, изменяя при том свое число в ряду, а вот заголовок (обернут в div) не становится по центру при размере xs (<= 576px). margin auto не помогает.

{ 
	font-family: "Tahoma"; 
} 
 
.container { 
	width: 1200px; 
	margin-bottom: 97px; 
	margin-left: auto; 
	margin-right: auto; 
} 
 
.section-title { 
	margin-top: 70px; 
	margin-bottom: 82px; 
	text-align: center; 
	text-transform: uppercase; 
} 
 
.image { 
	text-align: center; 
	min-height: 80px; 
	margin-bottom: 20px; 
} 
 
.text { 
	min-height: 34px; 
	min-width: 160px; 
	text-align: center; 
	font-size: 16px; 
 font-weight: 700; 
}
<body> 
 
    <h1 class="section-title"> 
      Почему нужно сделать это сейчас? 
    </h1> 
 
    <div class="container"> 
      <div class="row"> 
 
        <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_1.png" alt="Image 1"> 
          </div> 
          <div class="text"> 
            Первое преимущество 
          </div> 
        </div> 
 
 
         <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_2.png" alt="Image 2"> 
          </div> 
          <div class="text"> 
            Второе преимущество 
          </div> 
        </div> 
 
 
         <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_3.png" alt="Image 3"> 
          </div> 
          <div class="text"> 
            Третье преимущество 
          </div> 
        </div> 
 
 
         <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_4.png" alt="Image 4"> 
          </div> 
          <div class="text"> 
            Четвертое преимущество 
          </div> 
        </div> 
 
 
         <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_5.png" alt="Image 5"> 
          </div> 
          <div class="text"> 
            Пятое преимущество 
          </div> 
        </div> 
 
 
         <div class="col-sm-12 col-md-4 col-xl-2"> 
          <div class="image"> 
            <img src="img/img_6.png" alt="Image 6"> 
          </div> 
          <div class="text"> 
            Шестое преимущество 
          </div> 
        </div> 
 
 
      </div> 
    </div> 
 
  </body>

Answer 1
<div class="container">
    <div class="row">
        <h1 class="section-title">
            Почему нужно сделать это сейчас?
        </h1>
    </div>
</div>
READ ALSO
Как сделать динамичный background, при заданном filter:blur?
HTML

Как сделать динамичный background, при заданном filter:blur?

помогите решить проблемуЕсть header с содержимым, ему задал background-image, "заблюрил", задал linear-gradient, чтобы filter не вылез на весь блок header создал для...

 147
Изменение рамки когда select нажат
HTML

Изменение рамки когда select нажат

Подскажите пожалуйста, как изменить цвет синей рамки когда select нажат? http://joxiru/Q2KQLQKh4xMdyr

 164
Binding нескольких коллекций как одной
c#

Binding нескольких коллекций как одной

Есть коллекция (ObservableCollection) A, каждый объект коллекции A имеет коллекцию B (ObservableCollection)Нужно сделать Binding для DataGrid ItemsSource всех коллекций B, каждая...

 155
Ошибка при запуске пула IIS
c#

Ошибка при запуске пула IIS

Запускаю пул для mvc приложения на IISВсё работало

 162