SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot align image to middle

    I have a basic HTML file I made. I am trying to get the image to align to the center. I think I did it just as W3C says, but its not working. When I view the page, right align works, but middle and left both align to the left. I don't understand why.

    HTML Code:
    <html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <img src="images/myimage.png" style="float: middle;" alt="logo" height="50" width="394" />  
    <p style="text-align: center;">The website is currently being designed. Please check back later!</p>
    <p style="text-align: center; font-size: x-small;">Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
    </body>
    </html>
    I don't know what I'm doing wrong.
    Last edited by RusticProgrammer; Sep 13, 2009 at 18:07. Reason: FIXED CODE ERRORS

  2. #2
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I looked in my text book for class and I found a way around it.

    HTML Code:
    <html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <div style="text-align: center">
    <img src="images/myimage.png" style="float: middle;" alt="logo" height="50" width="394
    " />
    </div>  
    <p style="text-align: center;">The website is currently being designed. Please check back later!</p>
    <p style="text-align: center; font-size: x-small;">Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
    </body>
    </html>
    Is this the correct way or am I wrong? This fix just came into my head, but I'm not sure if it's correct.

  3. #3
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    The problem is you are using "float: middle;", there is no such float value as middle which is causing the issue. Using the align: center on the div will work how you want (if in doubt, try it out), but with the align in place in the div, you may as well remove the ones on it's children (the aligns in the p and that float in the img).

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the following instead. All the style have been taking out of the html and placed in the head of the document: (I've added comments to the styles so you can see what rules style which elements on the page).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Website</title>
    
    <style type="text/css">
    /* top div holding the image */
    #topcontainer {
        width: 100&#37;;
        text-align:center;
    }
    
    /* div to hold the bottom information - named it footer */
    #footer {
        width: 100%;
    }
    
    /* styles the paragraphs in the footer - also aligns the text to center */
    #footer p {
        font-size: 12px;  /* change font size as needed */
        text-align:center;
    }
     
    </style>
    </head>
    <body>
    <div id="topcontainer">
    <img src="images/myimage.png" alt="logo" height="50" width="394
    " />
    </div>
    <div id="footer"> 
    <p>The website is currently being designed. Please check back later!</p>
    <p>Copyright &copy; 2009 mywebsite.org<br />All Rights Reserved.</p>
    </div>  <!-- end footer -->
    </body>
    </html>
    Last edited by Nadia P; Sep 15, 2009 at 02:53.

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. My instructor said we can use CSS instead in the top of the file or in another file, but we won't learn that until chapter 3 so right now I was using the style tags.

    I will try these and see what happen. Thanks!

  6. #6
    SitePoint Enthusiast DavidChildress's Avatar
    Join Date
    Jun 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello RusticProgrammer,

    In both the third and fourth edition(page 143) of her textbook, Wendy Willard suugests:

    1) tell browser to display what would NORMALLY be an inline image as a block element. in CSS, block elements will automatically fill the entire available space. So if an image becomes a block element, its margins will grow until they reach the edges of the browser window

    display: block


    2) next...tell the browser to make BOTH the left and right margins the same... constructively, this centers the image

    margin-left: auto
    margin-right: auto




    So...the CSS style code LOCATED within the <head></head> element and using "centered" as the CLASS would look like this---

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



    The HTML code within the <body></body> element would look like this---
    <img src="" alt="" class="centered" />


Bookmarks

Posting Permissions

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