Results 1 to 3 of 3

Thread: Problems with center aligning an image for mobiles

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Vantaa, Finland

    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;

    #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'>
    What do I need to do center align the image?

  2. #2
    Join Date
    Aug 2012
    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
    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