Выравнивание карусели по центру

303

13 ноября 2021, 12:50

Столкнулся с проблемой выравнивания карусели по центру страницы. Создал карусели отдельный контейнер, которому прописал стили bootstrap col-lg-10 d-flex justify-content-center
Но в результате элемент все равно остается смещен к левому краю сетки (контейнер с текстом имеет точно такие же атрибуты и находится по центру):

Код секции, в которой возникла проблема:

<section id="main" class="main"> 
		<div class="container"> 
			<div class="col-lg-12 d-flex justify-content-center"> 
				<p class="head_line">Текст который тут будет</p> 
			</div> 
 
			<div class="col-lg-10 d-flex justify-content-center"> 
				<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
					<ol class="carousel-indicators"> 
						<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
						<li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
					</ol> 
					<div class="carousel-inner"> 
						<div class="carousel-item active"> 
							<img class="d-block w-100" src="img/photos/photo2.jpg" alt="First slide"> 
						</div> 
						<div class="carousel-item"> 
							<img class="d-block w-100" src="img/photos/photo1.jpg" alt="Second slide"> 
						</div> 
					</div> 
					<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
						<span class="carousel-control-prev-icon" aria-hidden="true"></span> 
						<span class="sr-only">Previous</span> 
					</a> 
					<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
						<span class="carousel-control-next-icon" aria-hidden="true"></span> 
						<span class="sr-only">Next</span> 
					</a> 
				</div> 
			</div> 
		</div> 
	</section>

Прошу помощи с выравниванием карусели по центру

Answer 1

У Вас разные col-lg для текста и для карусели, как уже и сказали - соответственно, - используйте для нужного выравнивания/позиционирования offsetting колонки:

Answer 2

Проблема решилась оборачиванием блока с каруселью в отдельный блок, растянутый на все 12 столбцов:

<div class="col-lg-12 d-flex justify-content-center"> 
  <div class="col-lg-10 d-flex justify-content-center"> 
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
      </ol> 
      <div class="carousel-inner"> 
        <div class="carousel-item active"> 
          <img class="d-block w-100" src="img/photos/photo2.jpg" alt="First slide"> 
        </div> 
        <div class="carousel-item"> 
          <img class="d-block w-100" src="img/photos/photo1.jpg" alt="Second slide"> 
        </div> 
      </div> 
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">Previous</span> 
      </a> 
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
      </a> 
    </div> 
  </div> 
</div>

Не уверен в стопроцентной правильности данного подхода

Answer 3

Хм....ну прям 10-ть столбцов я не знаю, но возможно получится вот так:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
           <p class="head_line">Текст который тут будет</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-8">
            <!--Тут твоя карусель -->
        </div>
        <div class="col-md-2">
        </div>
    </div>
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Реализация select с датой рождения

Возможно ли реализовать такую форму на html и css? Я вижу только вариант где делаешь 3 селекта, но тогда такой огромный список со значениями будет,...

106

c++