<div class="grid"> <div class="grid-item"> <div class="table"> <div class="table-cell"> <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" /> </div> </div> </div> <div class="grid-item"> <div class="table"> <div class="table-cell"> <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" /> </div> </div> </div> <div class="grid-item"> <div class="table"> <div class="table-cell"> <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" /> </div> </div> </div> <div class="grid-item"> <div class="table"> <div class="table-cell"> <img src="//cdn.shopify.com/s/files/1/0545/8689/products/leather-sidebag_large.png?v=1405525092" alt="Leather sidebag" /> </div> </div> </div> </div>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .grid { position: relative; margin-left: -10px; width: 100%; } .grid:after { content: ""; display: table; clear: both; } .grid-item { position: relative; display: block; float: left; width: 25%; padding-left: 10px; } .grid-item img { display: block; max-width: 100%; } .table { display: table; width: 100%; margin: 0 auto; background: #f6f6f6; border: 1px solid #ccc; } .table-cell { display: table-cell; vertical-align: middle; }