Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Image Alignment

  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    34
    Thanks
    1
    Thanked 1 Time in 1 Post

    Image Alignment

    Hi All,
    I'm trying to center my image AND the text following it in a box. Here is the CSS:

    Code:
    #box {width: 230px; margin-top: 5px; margin-left: 5px; margin-bottom: 5px; border: 2px solid Black;text-align: center;}
    #box img {border: none; vertical-align: text-bottom;}
    And here is the HTML:

    Code:
    <div id="box">
    <img src="myimage.jpg"/>
    This is some text describing this image. And some more stuff here. blah blah.
    </div>
    If I remove the text following the image, then the image aligns in the center correctly. But as soon as I add that text following the image, the text goes to the right of the image and pushes the image to the left.

    I am guessing I can fix this by putting the text in another DIV section. But I would rather avoid that since this setup is already throughout my website, and I'd prefer to fix it just one place using CSS. Any help would be appreciated.

    Thanks in advance.

    mamamia

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Center in what way? Vertically? Horizontally? Is the image supposed to be above the text?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    34
    Thanks
    1
    Thanked 1 Time in 1 Post
    Sorry for the misunderstanding.

    I'd like the image to center horizontally in the middle of the box. The width of the box is 230px and the image's width is about 165px, so there should be a good amount of empty space left on both the right and left. The text needs to start from the next line; none of it should be aligned to the right (or left) of the picture. Very similar to the descriptive text below a thumbnail in a gallery.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    #box {
    width: 230px; 
    margin:5px;
    border:2px solid #000;
    text-align: center;
    }
    #box img {
    display:block;
    margin:auto;
    }
    Be sure to set a width and height on the image in your code and don't forget the alt attribute either.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    34
    Thanks
    1
    Thanked 1 Time in 1 Post

    Thumbs up

    Thank you. This worked. I had actually tried this already. My issue turned out to be the fact that I had the vspace, hspace, and align parameters set on the img tag, which is of course a no no when using stylesheets.


  •  

    Posting Permissions

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