在一行 css 上对齐图像

Question

我正在使用引导程序来设计一个网站，我正在尝试水平对齐图像并隐藏溢出。

这是 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/

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

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

我猜这就是你要找的。​​p>