Center images that are floating inside div

Question

I have created a page which has images for each category on my store (boxing, martial arts, yoga etc...) I need the images to be centered on the page and also move down onto different lines if the window is shrunk. I hope this makes sense...

As you can see from the green horizontal line, they images are not centered (i do not want them in a vertical line one above another, i like how they are set up now next to each other).

My code is:

<style><!--
p {
padding:10px;
}
.img_collection {
width:252px;
height:167px;
}
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.center {
width:100%;
margin:auto;
border:1px solid green;
}
--></style>
<div class="center">
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/boxing"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Boxing.jpg?v=1491336153" alt="" /></a><br /><a href="http://theactivitymart.com/collections/boxing">Boxing</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/fitness-equipment"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Fitness_Equipment.jpg?v=1491336105" alt="" /></a><br /><a href="http://theactivitymart.com/collections/fitness-equipment">Fitness Equipment</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/gymnastics"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Gymnastics.jpg?v=1491336578" alt="" /></a><br /><a href="http://theactivitymart.com/collections/gymnastics">Gymnastics</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/martial-arts"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Martial_Arts.jpg?v=1491336138" alt="" /></a><br /><a href="http://theactivitymart.com/collections/martial-arts">Martial Arts</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/weight-lifting"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Weight_Lifting.jpg?v=1491336597" alt="" /></a><br /><a href="http://theactivitymart.com/collections/weight-lifting">Weight Lifting</a></p>
<p style="float: left; text-align: center;"><a href="http://theactivitymart.com/collections/yoga"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Yoga1.jpg?v=1491336562" alt="" /></a><br /><a href="http://theactivitymart.com/collections/yoga">Yoga</a></p>
</div>

Looks similar to - http://stackoverflow.com/q/33192745/483779 — Stickers, Apr 06 '17 at 20:48
looked and looked could not find anything similar thank you! — LukeTerzich, Apr 06 '17 at 21:08

score 2 · Answer 1 · answered Apr 06 '17 at 21:17

for a non-flexbox solution (i.e. also compatible with older browsers) you can assign display: inline-block; to the p element and text-align: center to their container:

p {
  padding: 10px;
  display: inline-block;
}

.img_collection {
  width: 252px;
  height: 167px;
}

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.center {
  width: 100%;
  margin: auto;
  border: 1px solid green;
  text-align: center;
}

<div class="center">
  <p>
    <a href="http://theactivitymart.com/collections/boxing"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Boxing.jpg?v=1491336153" alt="" /></a><br /><a href="http://theactivitymart.com/collections/boxing">Boxing</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/fitness-equipment"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Fitness_Equipment.jpg?v=1491336105" alt="" /></a><br /><a href="http://theactivitymart.com/collections/fitness-equipment">Fitness Equipment</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/gymnastics"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Gymnastics.jpg?v=1491336578" alt="" /></a><br /><a href="http://theactivitymart.com/collections/gymnastics">Gymnastics</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/martial-arts"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Martial_Arts.jpg?v=1491336138" alt="" /></a><br /><a href="http://theactivitymart.com/collections/martial-arts">Martial Arts</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/weight-lifting"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Weight_Lifting.jpg?v=1491336597" alt="" /></a><br /><a href="http://theactivitymart.com/collections/weight-lifting">Weight Lifting</a></p>
  <p>
    <a href="http://theactivitymart.com/collections/yoga"><img class="img_collection" src="//cdn.shopify.com/s/files/1/1712/9905/files/Yoga1.jpg?v=1491336562" alt="" /></a><br /><a href="http://theactivitymart.com/collections/yoga">Yoga</a></p>
</div>

I vote this - I completely spaced on the entire `inline-block` . Much better than my "weird hacky odd flexbox" idea — Mike Diglio, Apr 06 '17 at 21:22

Mike Diglio · Accepted Answer · 2017-04-06T21:11:39.277

1

For your images container, .center, you can use a "Flexbox" which will allow your items to be centered and move onto rows when they wrap outside of their parent:

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

https://fiddle.jshell.net/830kqqxv/

You can take a look at this fiddle to look at the "hacked" together split flexbox grid that will give you a 4x2 grid, but then wrap into a 3x1x2 grid.

https://fiddle.jshell.net/o2xr8cax/

edited Apr 06 '17 at 21:11

answered Apr 06 '17 at 20:50

Mike Diglio

725
8
13

Thats perfect! after a little fiddling thats exactly what i need! Although instead of being organised 4/2 like in the image above they are 4/2 but the bottom 2 are centered? – LukeTerzich Apr 06 '17 at 20:59
I know the whole thing was about centering them, but only so that they were centered inside the container, now the images are actually centered? if that makes sense – LukeTerzich Apr 06 '17 at 21:00
I see - You can hack something together to get it the way you are looking for (4 items on top 2 on the bottom and have them centered) but it may involve some media queries in order to adjust display elements for them to split at certain times. Another thing you can do, and it is a little "hacky" is created 2 "flex-boxes" that will nest 4 image elements and 2 image elements. You can either have them wrap (but this will create a 3x1x2 grid and then a 2x2x2 grid, or have `flex-wrap: no-wrap;` and adjust the image sizes with an `@media` query – Mike Diglio Apr 06 '17 at 21:10

Center images that are floating inside div

2 Answers2