There is a grid with pictures in 4 columns centered vertically and horizontally. Question: how to make it so that at resolutions xs <576px they xs <576px down 2 by bootstrap and 2 in a xs <576px and horizontal xs <576px do not appear, and keep the current cross-browser compatibility? Feedl

 .centered > .row { display: table; width: 100%; } .centered > .row > div { display: table-cell; float: none; text-align: center; vertical-align: middle; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container centered"> <div class="row"> <div class="col-xs-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-3"> <img src="http://placehold.it/100x19"> </div> <div class="col-xs-3"> <img src="http://placehold.it/80x72"> </div> </div> <div class="row"> <div class="col-xs-3"> <img src="http://placehold.it/80x72"> </div> <div class="col-xs-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-3"> <img src="http://placehold.it/100x19"> </div> </div> </div>

    1 answer 1

    With display: table; and display: table-cell; it does not work out!

    Try using display: flex; + marking for the col-xs-6 col-sm-3 grid (50% - on the 2nd on mobile devices, on 4 - 25% already on the tablets).

     .centered > .row { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; } .centered > .row > div { text-align: center; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container centered"> <div class="row"> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x19"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/80x72"> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/80x72"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x19"> </div> </div> </div>

    Option with pseudo-element and known height div:

     .centered > .row > div { text-align: center; position: relative; height: 100px; } .centered > .row > div:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .centered > .row > div img { display: inline-block; vertical-align: middle; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container centered"> <div class="row"> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x19"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/80x72"> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/80x72"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/70x81"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x33"> </div> <div class="col-xs-6 col-sm-3"> <img src="http://placehold.it/100x19"> </div> </div> </div>

    • thank. it is very unfortunate that the original cross-browser compatibility is lost when this is done .. but how can you not redefine the blocks (not tabular) at low resolutions? after all, the designers had to cope with a similar task before the invention of flex . I ask how one of the most respected and experienced forumchanki! - Vasya
    • one
      @ Vasya, apparently it was not up to flex and there was no such task (especially when they were imposing with tables, there was no talk of adaptability)! There is another option, but there you need to set the height of the div jsbin.com/foceha/edit?html,css,output - HamSter
    • thanks, let's try! - Vasya