Align list item images to center in html

Question

I\'m learning web development with responsive design(still a noob) so please go easy! I will try to be as thorough as possible but please let me know if you need more informatio

Answer 1

Can't you do:

margin-left: auto; margin-right: auto; 

? This would be responsive, it's not a fixed margin.

Answer 2

Your edited code:

.da-thumbs li {
   display:inline-block;
   width:46%;
   margin: 5px;
   padding: 8px;
   position: relative;
}
.da-thumbs li img{
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

JSFiddle here: https://jsfiddle.net/1zq95tzp/

You were floating the li's for one thing, also you want to add the box shadows to the images, not the li. The reason for this is that the li is going to be larger than the image, so the box shadow will appear far away from the edges of the actual image. As the screen shrinks, the images will stack. You may need to eventually give the images this styling:

max-width:100%;

so that they don't go off the page at phone width (I didn't look at the size of the images). Hope this helps you.