Question

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

我有2列。 1st的图像为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。

要水平对齐图像，请将bootstrap 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;
  }
}

BTW @TemaniAfif建议将 bootstrap3 升级为 bootstrap4 。您可以轻松地在 bootstrap4 中解决此类问题。

如果您对使用 bootstrap4 有任何想法，请使用此参考

<强> Bootstrap4 Documentation

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

绝对位置正在解决问题。

垂直和水平对齐图像中心

3 个答案: