垂直和水平對齊圖像中心

Question

我在這里搜索過，但找不到適合我的解決方案。 我已經嘗試了以下將圖像在垂直和水平方向上 居中 對齊圖像在垂直和水平方向上 居中對齊以及我發現的更多內容。

我有2欄。 第一個具有圖像500px X 500px第二個具有文本

我需要圖像中心垂直和水平對齊。 並且在移動視圖上時，圖片應顯示在文字上方/居中。

<section id="what">
  <div class="row">
    <div class="col-md-6 box-image"><img class="box-image" src="http://chalkgallerylewes.co.uk/wp-content/uploads/2013/08/Placeholder-500x500px.png"></div>
    <div class="col-md-6">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <ul>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
        <li>Placeholder list </li>
      </ul>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </div>
</section>

我用一種嘗試的方法制作了JF小提琴。

https://jsfiddle.net/davidstokes5000/rrdfLpyj/

Answer 1

您可以嘗試執行此操作（無需設置img樣式）。 它應該將圖像居中放置在文本上方。

.box-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 2

嘗試使用flex CSS。 將display:flex應用於row類，對於子項的垂直對齊中心，應用align-items:center 。

要使圖像水平居中對齊，請將引導程序center-block類應用於<img>

Flex CSS的參考

出於響應目的，請使用媒體查詢將display: block設置到該row以實現結果。

您的代碼中也有水平滾動，以消除此問題，將row代碼包裝到具有container-fluid類的div中。

更新小提琴

#what {
  background-color: #fff;
}

#what .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width:768px) {
  #what .row {
    display: block;
  }
}

順便說一句，@TemaniAfif提出了將bootstrap3升級到bootstrap4的建議 。 您可以輕松地在bootstrap4中解決此類問題。

如果您對使用bootstrap4有任何想法，請使用此參考

Bootstrap4文檔

Answer 3

 #what{background-color: #fff;} .box-image img{ display: flex; align-items: center; justify-content: center; } 

 <section id="what"> <div class="row"> <div class="col-md-6 box-image"><img class="box-image" src="http://chalkgallerylewes.co.uk/wp-content/uploads/2013/08/Placeholder-500x500px.png"></div> <div class="col-md-6"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <ul> <li>Placeholder list </li> <li>Placeholder list </li> <li>Placeholder list </li> <li>Placeholder list </li> <li>Placeholder list </li> </ul> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> </section> 

絕對位置問題正在解決。