在 Bootstrap 中 div 中垂直对齐图像

Question

我正在尝试在 div 中将一些图像垂直居中对齐。我正在使用 bootstrap。图像大小不规则，因此，我试图垂直对齐它们而不是调整它们的大小。我在 Whosebug 上看到了许多其他链接，none 帮助到现在。这是我的代码，有人可以保释我吗？

<div class="col-md-12" style="background-color: #FFFFFF">
     <div class="row">
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
     </div>
     <div class="row">
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" /></div>
          <div class="col-md-3"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
          <div class="col-md-6"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
     </div>
</div>

Answer 1

我不确定，但我认为宽度应该有效：

.col-md-3 {
   position: relative;
}

img {
   position: absolute;
   left:0;
   right:0;
   margin:0 auto;
}

Answer 2

尝试简单地将 text-center class 添加到内部 div 中。这应该使 div.

的内容居中

像这样

<div class="col-md-12" style="background-color: #FFFFFF">
    <div class="row">
         <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/exist.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
         <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/esf.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.esf'|trans }}" alt="" /></div>
         <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/eu.png') }}" data-toggle="tooltip" title="{{ 'about-us.awards.eu'|trans }}" alt="" /></div>
         <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill; vertical-align: middle; display: inline-block; position: relative;" src="{{ asset('bundles/app/images/home/awards/bmwi.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.bmwi'|trans }}" alt="" /></div>
    </div>
    <div class="row">
        <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/baystartup.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.baystartup'|trans }}" alt="" />    </div>
        <div class="col-md-3 text-center"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/grm.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.grm'|trans }}" alt="" /></div>
        <div class="col-md-6 text-center"><img style="height: 100%; width: 100%; object-fit: fill;" src="{{ asset('bundles/app/images/home/awards/lmu.jpg') }}" data-toggle="tooltip" title="{{ 'about-us.awards.lmu'|trans }}" alt="" /></div>
    </div>
</div>

Answer 3

您可以将 flexbox 与媒体查询一起使用，以保持 bootstrap 这样的布局和响应能力 https://jsfiddle.net/2Lzo9vfc/263/

CSS

 @media(min-width: 992px) {
  .space {
    margin: 50px auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
  }
}

HTML

<div class="container">

  <div class="row space">
    <div class="col-md-3">
      <img src="http://placehold.it/350x150">     
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x250">  
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x50">  
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x100">  
    </div>
  </div>

    <div class="row space">
    <div class="col-md-3">
      <img src="http://placehold.it/350x100">     
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x50">  
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x350">  
    </div>
    <div class="col-md-3">
      <img src="http://placehold.it/350x200">  
    </div>
  </div>

</div>

Answer 4

如果你知道每行最大图像的高度，你可以使用这样的东西jsfiddle

   <div class="row">
  <div class="col-md-3" style="height: 600px;"><img src="https://fakeimg.pl/400x200/" style="position: relative;
  top: 50%;
  transform: translateY(-50%);" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
  <div class="col-md-3" style="height: 600px;"><img src="https://fakeimg.pl/400x200/" style="position: relative;
  top: 50%;
  transform: translateY(-50%);" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
  <div class="col-md-6" style="height: 600px;"><img src="https://fakeimg.pl/800x600/" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
</div>

在 Bootstrap 中 div 中垂直对齐图像

Vertical align image in div in Bootstrap

css

vertical-alignment

twitter-bootstrap