- Original Poster
- #1
Hi All
I have a responsive 4 x column setup for a static blow element on my site, I've been trying to centre the images in the columns but I'm unable to do this, on a phone it looks like it's working but on a laptop the images are def off centre my code is below any ideas on why this isnt working as expected?:
<style><!--
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
/* center images in the columns */
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
}
--></style>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/18v-Drill-Drivers.jpg"}}" /><a title="Makita Cordless Tool Spare Parts" href="https://www.sparetoolparts.co.uk/makita/cordless-tools.html" target="_self">Makita Cordless Tool Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Percussion-Drills.jpg"}}" /><a title="Makita Corded Tools Spare Parts" href="https://www.sparetoolparts.co.uk/makita/corded-tool.html" target="_self">Makita Corded Tool Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Chainsaws.jpg"}}" /><a title="Makita Lawn & Garden Spare Parts" href="https://www.sparetoolparts.co.uk/makita/lawn-garden.html" target="_self">Makita Lawn & Garden Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Cordless-Multi-Tools.jpg"}}" /><a href="https://www.sparetoolparts.co.uk/makita/other.html" target="_self">Makita Accessories</a></div>
I have a responsive 4 x column setup for a static blow element on my site, I've been trying to centre the images in the columns but I'm unable to do this, on a phone it looks like it's working but on a laptop the images are def off centre my code is below any ideas on why this isnt working as expected?:
<style><!--
* {
box-sizing: border-box;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column {
width: 100%;
}
/* center images in the columns */
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
}
--></style>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/18v-Drill-Drivers.jpg"}}" /><a title="Makita Cordless Tool Spare Parts" href="https://www.sparetoolparts.co.uk/makita/cordless-tools.html" target="_self">Makita Cordless Tool Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Percussion-Drills.jpg"}}" /><a title="Makita Corded Tools Spare Parts" href="https://www.sparetoolparts.co.uk/makita/corded-tool.html" target="_self">Makita Corded Tool Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Chainsaws.jpg"}}" /><a title="Makita Lawn & Garden Spare Parts" href="https://www.sparetoolparts.co.uk/makita/lawn-garden.html" target="_self">Makita Lawn & Garden Spare Parts<br /></a></div>
<div class="column" style="text-align: center;"><img class="center" alt="" src="{{media url="wysiwyg/Makita_Category/All-Cordless-Multi-Tools.jpg"}}" /><a href="https://www.sparetoolparts.co.uk/makita/other.html" target="_self">Makita Accessories</a></div>