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.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    So I have four small images, 200x200px each, and I want to evenly distribute these on the page horizontally, so that the white space on the left and right sides of each image is the same. Then I want to center these vertically so that the space on the top and bottom of each image should be the same. Does anyone know how to do this in css? I could place each one individually, but then if I added an image in the markup I'd have to go back and edit the css for each image.

  2.  

  3. #2
    Member
    Join Date
    Aug 2008
    Location
    Chicago IL, USA
    Posts
    83
    Member #
    17217
    possibly something like this:

    img { float: left; margin: 4px !important; margin: 4px 2px;}

    it really depends on what you're trying to accomplish.
    drew beta - Portfolio, Blog500 - Graduate Studies Blog, WP4P - Blog, Life in Beta - Music Podcast for Nerds

  4. #3
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    Quote Originally Posted by drewbeta
    possibly something like this:

    img { float: left; margin: 4px !important; margin: 4px 2px;}

    it really depends on what you're trying to accomplish.
    No, I want the images to be evenly distributed on the page, i.e. for three images: image 1 at 25% from the right of the browser window, image 2 in the horizontal center of the browser window, and image 3 at 25% from the left of the browser window. The spaces to the left and right of each image should be equal and as targe as possible.

    In other words,

    L--x--IMG1--x--IMG2--x--IMG3--x--R

    where L is the left side of the browser window, R is the right side of the browser window, img2 is centered in the browser window, and x=x=x=x.

    But I also want this to be able to change dynamically for the number of images there are. I'm also trying to get this row of images centered vertically on the browser window.

    It seems like there *should* be an easy way to do this, although so far everything I'm finding on the subject is maddeningly confusing.

  5. #4
    Junior Member
    Join Date
    Feb 2009
    Posts
    6
    Member #
    18369
    Ok wow that took me about four hours to figure out, but it works with:

    Code:
    <table width=100% height=100%>
    <tbody valign="middle">
    <tr> 
    <td align="center"><img src="blue_dude.png" alt="...and what fireworks lept from my cranium!"></td>
    <td align="center"><img src="green_mushrooms.png" alt="voyages extraordinaires"></td>
    <td align="center"><img src="red_juju.png" alt="juju house"></td>
    <td align="center"><img src="yellow_elephant.png" alt="the colossal elephant of coney island"></td>
    </tr>
    </tbody>
    </table>
    and when you take out the URL in the doctype declaration.

    But I wish I could figure out a clean way to do this with CSS.

  6. #5
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    Did you have your images in a list? If you did, give your ul the same width as your page. Subtract 800 (the width of all of your images) from your page width, divide the left over by 5, and use that number for margin or padding-left for all images, give the last image a padding-right of the same number. Or you can carefully do your math for margins on either side of the ul and then give padding-left and -right to each list image.As long as all margins, padding and image widths equal the page width or div width, should be ok, but check in IE! As far as centering vertically....vertical-align? Or position: relative; top: 50%; margin-top: -(half of image height);
    Semantic, Valid, and Accessible Design!


  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Quote Originally Posted by jon.reeve
    Ok wow that took me about four hours to figure out, but it works with:

    Code:
    <table width=100% height=100%>
    <tbody valign="middle">
    <tr> 
    <td align="center"><img src="blue_dude.png" alt="...and what fireworks lept from my cranium!"></td>
    <td align="center"><img src="green_mushrooms.png" alt="voyages extraordinaires"></td>
    <td align="center"><img src="red_juju.png" alt="juju house"></td>
    <td align="center"><img src="yellow_elephant.png" alt="the colossal elephant of coney island"></td>
    </tr>
    </tbody>
    </table>
    and when you take out the URL in the doctype declaration.

    But I wish I could figure out a clean way to do this with CSS.
    I would stay away from tables as much as possible and go with jyuill's example of a list. Or do a padding/margin job on some divs.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Assuming height of 200px for each image, here's what I came up with... works for Firefox. Haven't tested in IE.

    HTML Code:
    <html>
    <head>
        <title>CSS Horizontal and Vertical Centering of Images</title>
        <style>
            body {
                margin: 0;
            }
            .centered-image-list {
                position: absolute;
                top: 50%;
                margin-top: -100px;
                width: 100%;
                text-align: center;
            }
            .centered-image-list ul {
                margin: 0 auto;
                padding: 0;
                width: 92%;
            }
            .centered-image-list li {
                list-style: none;
                float: left;
                margin: 0;
                padding: 0;
                width: 25%;
            }
            .centered-image-list li img {
                width: 200px;
                height: 200px;
                border: 0;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div  class="centered-image-list">
            <ul>
                <li><img src="image1.jpg" alt="Image 1" /></li>
                <li><img src="image2.jpg" alt="Image 2" /></li>
                <li><img src="image3.jpg" alt="Image 3" /></li>
                <li><img src="image4.jpg" alt="Image 4" /> </li>
            </ul>
        </div>
    </body>
    </html>


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
  •  

Search tags for this page

css distribute divs
,
css distribute multiple images horizontally
,

css distribute objects horizontally

,
css div width distribute evenly
,

css horizontally distribute divs

,
css text distributed
,
css text distribution
,
distribute horizontal divs evenly
,
how to align 3 images evenly in css
,
html and css evenly distribute text
Click on a term to search for related topics.
All times are GMT -6. The time now is 03:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com