在一行css上对齐图像

Question

我使用bootstrap设计网站，我试图水平对齐图像并隐藏溢出。

这里是div

<div class="timeline-gallery col-md-12" style="display: inline-block;"> 
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
</div>

和图像的css

.timeline-gallery img {
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 5px;
    overflow: hidden;
}

他们占据了我喜欢的空间，但却排列如下

Answer 1

很难理解你想要什么......

<div class="timeline-gallery col-md-12"> 
  <div class='col-md-4'>
    <img src="/media/cache/de/0f/de0fca4d8b894f36a82a343cd150fcb9.jpg" class="img-thumbnail">
  </div>
  <div class='col-md-4'>
    <img src="/media/cache/93/46/9346e937935238a5781beba426a279a1.jpg" class="img-thumbnail">
  </div>
 <div class='col-md-4'>
    <img src="/media/cache/a2/53/a2531798d757427e8d5c625d1dfc34bc.jpg" class="img-thumbnail">
  </div>
</div>

从引导列col-md-12中删除style='display:inline-block;'。然后将col-md-4添加为图像容器，将CSS添加为图像：

  .timeline-gallery img {

    max-width:100%;
    height:auto;
    margin:0 auto;

 }

但我不确定你想要什么...

Answer 2

您可以使用解决方案https://jsfiddle.net/forj72t6/1/

＆＃13;

＆＃13;

.timeline-gallery img {
    display:block;
    position: relative;
    margin-right: 5px;
    overflow: hidden;
    margin: 0 auto;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="coantiner-fluid">
  <div class="row">
    <div class="timeline-gallery col-md-12"> 
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcST7YDjHjnP5DURcPrZpcFPO6BI6I4kOiqTvNeCy4NRYFbA--5J" class="img-thumbnail">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想这就是你要找的东西。