如何针对移动设备快速响应地垂直对齐一列图像

Question

I'm coding up an app that displays 9 newest photos having certain tag. I solved the problem of different image sizes by setting every picture's size to 240px wide and 200px tall.

My question is how do I center them vertically so they are in the middle of screens width? I want them to be responsive, so they are always in the middle, no matter the width of the device displaying them.

HTML:-

<div id="results" class="row"></div> 

So far I've tried pretty much everything I could find on the internet. I should mark, that there are 9 photos being displayed, so user will have to scroll. That means that every solution containing position: absolute; won't do it.

Photos are being picked through Flickr API. After that, I .append() them to div#results by doing:-

$("#results").append('<div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4"><a href="'+myresult_size.url+'" target="_blank"><img src="'+myresult_size.source+'" ></a></div>');

Bootstraps grid fails to center them.

Answer 1

try with this

 <div id="results" class="row text-center"></div> 

or use

 #results{ margin: 0 auto; } 

Answer 2

For cell of 4-wide you need to use offset class col-sm-offset-4 . When you define col-sm-4 , all classes for wider viewports will inherit this definition, I mean col-sm-4 is equal to col-sm-4 col-md-4 col-lg-4 . Also you need to apply class text-center for cell that is wider than its child image.

So result is:

$("#results").append('<div class="miniaturka col-xs-12 col-sm-4  col-sm-offset-4 text-center">
    <a href="'+myresult_size.url+'" target="_blank">
       <img src="'+myresult_size.source+'" >
     </a>
    </div>');

Here is an example snippet:

 img { display: block; margin: 0 auto; max-width: 240px; max-height: 200px; height: auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="miniaturka col-xs-12 col-sm-4 col-sm-offset-4 text-center"> <a href="#" target="_blank"> <img src="http://placekitten.com/g/200/300"> </a> <a href="#" target="_blank"> <img src="http://placekitten.com/g/300/300"> </a> <a href="#" target="_blank"> <img src="http://placekitten.com/g/400/300"> </a> <a href="#" target="_blank"> <img src="http://placekitten.com/g/200/300"> </a> <a href="#" target="_blank"> <img src="http://placekitten.com/g/200/300"> </a> <a href="#" target="_blank"> <img src="http://placekitten.com/g/200/300"> </a> </div> </div> 

Answer 3

Text-align center on parent centers all child elements which are inline.

 .miniaturka { width: 100vw; text-align: center; } 

 <div id="results" class="row"> <div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4"> <a href="#" target="_blank"> <img src="http://placehold.it/350x150"> </a> </div> <div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4"> <a href="#" target="_blank"> <img src="http://placehold.it/350x150"> </a> </div> </div>