在一条线上对齐图像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> 

和图像

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

他们占据我想的空间，而是在CSS被安排像下面

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>

我想这是你在找什么。