www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problems with center aligning an image for mobiles

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Problems with center aligning an image for mobiles

    I am having problems with center aligning an image. I have used WC3 example code. Ihe image aligns to the left.

    The CSS code is;

    Code:
    #insta-foot {
                  margin-top: 5px;
                  max-width: 96%;
                  height: auto;
                  margin-left: 2px;
                  margin-right: 2px;
                  border: 2px inset #d5d6ff;
                  background-color: #FEFDE1;
                 }
    
    #insta-foot img {display: block;
                     margin-left: auto;
                     margin-right: auto; 
                     max-width: 100%;
                     height: auto;
                     margin-top: 5px;
                    }

    The HTML code is (it's a pugin from another site to show my photographs that are on it);

    HTML Code:
    <div id="insta-foot">
    <script type='text/javascript' src='http://instaprints.com/slideshowmouseover.php?id=22608621744&memberidtype=artistid&memberid=226086&width=120px&height=120px'></script>
    <img id='faaslideshowimage[22608621744]' onClick='javascript: mouseclick22608621744(event);' onMouseOver='javascript: mouseover22608621744();' onMouseOut='javascript: mouseout22608621744();'src='http://fineartamerica.com/Blank.jpg' style='width: 120px; height: 120px; padding: 0px; margin: 0px; border: 1px solid #666666; cursor: pointer; cursor: hand;' alt='Art Prints' title='Art Prints'>
    </div>
    What do I need to do center align the image?

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    The problem is that the image itself (in the script) has styling applied directly to it so that will override your styling. You need to remove that styling first if you can

  3. #3
    Join Date
    Sep 2013
    Posts
    221
    Hope the below code helps you.

    Use this instead:

    img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles