CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Momin Zahid
Momin Zahid

Reputation: 406

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!

So I'm trying to design a page which has jquery hover effects on images. You would think I'm having trouble in the JS but my problem is much simpler which makes it frustrating like hell. I want my images to align in the center while they're aligned to the extreme left. the image boxes are li's and I've tried to add them to a div and align the div to the center.

Please note that I also need it to be responsive so can't simply add a margin or padding.

Following is my html body:

<body>
<div class="body">

   <div> <img src="images/logo.png" class="image"></div>

            <div class="imgs">
                <ul id="da-thumbs" class="da-thumbs">
                    <li>
                        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
                            <img src="images/7.jpg" />
                            <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
                        </a>
                    </li>
                    <li>
                        <a href="http://dribbble.com/shots/501695-Cornwall-Map">
                            <img src="images/9.jpg" />
                            <div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
                        </a>
                    </li>

                </ul>
            </div>
</div>


        <script type="text/javascript">
            $(function() {

                $(' #da-thumbs > li ').each( function() { $(this).hoverdir({
                    hoverDelay : 75
                }); } );

            });
        </script>
</body>

Here is my CSS: 

.body {
    width: 100%;
    height: 1000px;
    animation-name: colorChange;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    text-align: center;
}

@keyframes colorChange {
    0% {
        background: #4BB4BF;    
    }
    20% {
        background: #306F7A;    
    }
    40% {
        background: #207DFF;    
    }
    60% {
        background: #1B98E0;    
    }
    80% {
        background: #7EA0E0;    
    }
    100% {
        background: #4BB4BF;    
    }


}

.button {
    padding: 10px;
    margin-top: 40px;
    font-size: 20px;
}



.da-thumbs {
    list-style: none;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 20px auto;
    padding: 0;

}
.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: #333;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: rgba(255,255,255,0.9);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);
}





<!-- Demo content here --> 





*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* General Demo Style */
body{
    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

    font-weight: 400;
    font-size: 15px;

}
a{
    color: #555;
    text-decoration: none;
}
.container{
    width: 100%;
    position: relative;
    min-height: 750px;
}
.clr{
    clear: both;
    padding: 0;
    height: 0;
    margin: 0;
}

.image {
 max-width: 100%;
    max-height: 100%;
    background-size: cover;
}

.imgs {margin: 0 auto;
align: center;
}

Please give your thoughts on how I can align these elements?

Fiddle Case: https://jsfiddle.net/eqyfm41r/3/

Upvotes: 2

Views: 895

Answers (2)

dSumner.1289
dSumner.1289

Reputation: 712

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.

Upvotes: 1

Simonyi J&#225;nos
Simonyi J&#225;nos

Reputation: 86

Can't you do:

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

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

Upvotes: 0

Related Questions