Question

我试图在div中垂直对齐几张图像。我正在使用bootstrap。图像的大小不规则，因此，我试图垂直对齐它们而不是调整它们的大小。我在stackoverflow上看到很多其他链接，直到现在都没有帮助。这是我的代码，有人可以把我救出来吗？

＆＃13;

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

＆＃13;

Answer 1

如果您知道每行最大图片的高度，可以使用类似jsfiddle

的内容

＆＃13;

   <div class="row">
  <div class="col-md-3" style="height: 600px;"><img src="http://lorempixel.com/400/200/animals/" 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="http://lorempixel.com/400/200/animals/" 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="http://lorempixel.com/800/600/animals/" data-toggle="tooltip" title="{{ 'about-us.awards.exist'|trans }}" alt="" /></div>
</div>

＆＃13;

Answer 2

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

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

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

Answer 3

尝试简单地将text-center类添加到内部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 4

您可以将 flexbox 与媒体查询一起使用，以保持引导布局和响应能力，例如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>

在Bootstrap中div中的垂直对齐图像

4 个答案: