Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Hello again, here comes another beginner question. Hopefully I am not annoying you too much with these.

    I am now struggling to center an image. The book that I am learning from, as well as everything I can find via google, tells me that setting margins to "auto" should do the trick. I can't seem to get it to work though.

    Would someone mind taking a quick look at the html and css I attached to this and tell me why my image called "wall-small" is not centering?

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Nevermind, I added "text-align: center" to center the text under the image, and that centered the image too. Does text-align always work for images? I thought it was only for text.

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    it is only for text. Web Design & Development this is a tutorial i wrote for centering. this is always the best way to center an image. text-align gives an element a block value and may cause unexpected layout problems.

    while($get_it !== true){ continue; }

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    What Dorky said. The reason it's called "text-align" is because it's intended to align text. No more, no less.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Thanks. I thought it was fishy that text-align was doing it.

    I realized why {width: 540px; margin-left:auto; margin-right: auto;} wasn't working (I think). It only works with block elements. I enclosed the image within <p> tags, and it worked fine.

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    { position: relative; width: 540px; margin-left:auto; margin-right: auto;}

    the reason it worked with <p> is the same reason you don't want to use text-align. add the position highlighted above.

    while($get_it !== true){ continue; }

  8. #7
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Hmm. I got rid of the paragraph tags, added position: relative, and now it is back to being left aligned.

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Add display: block; to it. Although you really should enclose an image within a block-level element just because an image is intended to be inline.

    The automatic margins and defined width will block-center child elements within the parent element.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    yea. my bad. i ***umed everyone used containers. http://richardkentgates.com/test.html

    shows
    top: games fix
    bottom: my fix

    view source to see the code

    while($get_it !== true){ continue; }

  11. #10
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Wow. You guys are great! Thank you again.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com