CODEWITHSUNDEEP
htmlcss
Clarke Cribb
Clarke Cribb

Reputation: 269

center pictures within containers

I am trying to work out the best way for me to center each of my pictures (#contact1, #contact2, #contact3) inside each of their containers. I have tried to put margin left etc but doesnt work for when I scale up. I have a JSFiddle I have started: http://jsfiddle.net/tJugd/3592/

HTML:

<div class="slide" style="height:66px;">
    <div class="staff staff-matt" data-hammer="[object Object]">
        <div id="contact1"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
    </div>

    <div class="staff staff-shail" data-hammer="[object Object]">
        <div id="contact2"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
    </div>

    <div class="staff staff-leah" data-hammer="[object Object]">
        <div id="contact3"><img src="mobile_aboutus.svg" alt="About us" style="width:44px;height:auto"></div>
    </div>
</div>

CSS: (View all on JSFiddle)

#contact1, #contact2, #contact3{
    position:relative;
    background-color:white;
    width:100%;
    height:66px;
}

Upvotes: 0

Views: 39

Answers (2)

mrdeleon
mrdeleon

Reputation: 645

You will need to make you images display block and add margin 0 auto to it

#contact1 img, #contact2 img, #contact3 img{
    margin: 0px auto;
    display:block;
}

Upvotes: 1

dylanw3000
dylanw3000

Reputation: 38

Try:

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

This makes your image have an equal margin on both sides, and usually works with most divs and images.

Upvotes: 0

Related Questions