垂直和水平对齐图像中心

Question

我在这里搜索过，但找不到适合我的解决方案。我试过以下 Align image to the center both vertically and horizontally Image center align vertically and horizontally 还有一些我发现的。

我有 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 Fiddle。

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

Answer 1

尝试使用 flex css。将display:flex 应用于row 类，对于子项的垂直对齐中心应用align-items:center。

要将图像水平居中对齐，请将引导程序center-block 类应用于<img>

Reference for flex css

出于响应目的，使用媒体查询将display: block 设置为row 以实现您的结果。

您的代码中还有水平滚动，要删除它，请将您的 row 代码包装到具有 container-fluid 类的 div 中。

Updated Fiddle

#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 Documentation

Answer 2

#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>

绝对位置正在解决问题。

Answer 3

您可以试试这个（无需设置img 的样式）。它应该使图像居中于文本上方。

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