Question

如何将一行元素居中放置在哪，就可以选择哪一个元素将成为网页的中心？表示所有其他元素都应浮动在该中心元素的左侧或右侧。

在此示例中，我想使行以#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/

Answer 1

我相信您的要求可以通过使用bootstrap的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>

Answer 2

将justify-content: center添加到row类中。

revised fiddle demo

Answer 3

尝试一下：

  <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类以适应您的需求

将一行元素专门放在一个元素上

3 个答案: