CODEWITHSUNDEEP
htmlcssweb
LukeTerzich
LukeTerzich

Reputation: 554

Center images that are floating inside div

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... enter image description here

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>

Upvotes: 1

Views: 54

Answers (2)

Johannes
Johannes

Reputation: 67778

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>

Upvotes: 2

Mike Diglio
Mike Diglio

Reputation: 735

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/

Upvotes: 1

Related Questions