Центрирование ряда элементов конкретно на одном элементе - PullRequest
Новая
       15

Центрирование ряда элементов конкретно на одном элементе

0 голосов
/ 05 мая 2019

Как я могу центрировать ряд элементов, где я могу выбрать, какой элемент будет самым центром веб-страницы? Это означает, что все остальные элементы должны быть плавающими слева или справа от этого центрального элемента.

Я хочу, чтобы строка была центрирована на #itemMainPic в этом примере того, с чем я работаю: 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.itemOtherPics {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 50vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-2 float-left itemOtherPics"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button"
        data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"></div>
    <div class="float-none" id="itemMainPic"><img class="pr-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"></div>
    <div class="float-right">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <h6 class="card-sbutitle">Subtitle</h6>
          <p class="card-text">text</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/by091hqp/1/

Ответы [ 3 ]

0 голосов
/ 08 мая 2019

Добавьте justify-content: center к классу row.

исправленная демоверсия скрипки

0 голосов
/ 13 мая 2019

Попробуйте: 

  <div class="d-flex flex-row mb-3 justify-content-between">
    <div class="p-2 itemOtherPics"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button"
        data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"><img class="py-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"></div>
    <div class="p-2" id="itemMainPic"><img class="pr-3 img-fluid" src="https://place-hold.it/1200x800/e600ff" type="button" data-toggle="modal" data-target="#exampleModal" style="height:300px;width=auto;"></div>
    <div class="p-2">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <h6 class="card-sbutitle">Subtitle</h6>
          <p class="card-text">text</p>
        </div>
      </div>
    </div>
  </div>

Возможно, вам придется изменить класс p-2 в соответствии с вашими потребностями

0 голосов
/ 07 мая 2019

Я полагаю, что то, что вы спрашиваете, может быть решено с помощью flex-бутстрапа с выравниванием контента между.

https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content

.bd-highlight {
  background-color: rgba(20, 20, 20, 0.3);
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="d-flex flex-row bd-highlight mb-3 justify-content-between">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
...