Align List Item Images To Center In Html

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 information!

Solution 1:

Your edited code:

.da-thumbsli {
   display:inline-block;
   width:46%;
   margin: 5px;
   padding: 8px;
   position: relative;
}
.da-thumbsliimg{
   box-shadow: 01px3pxrgba(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.

Solution 2:

Can't you do:

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

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