Center aligning linked images with CSS

Discussion in 'Web Design and Development' started by Darran, Aug 31, 2008.

  1. macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #1
    I would like to center aligned my linked images.

    To center align, I would have to use the following properties:

    Code:
    display:block;
    margin:0 auto;
    
    That works fine if the image is not linked.

    In my case, even if I hover over a white space, my hover properties would come into place due to it being changed to a block element. And this wouldn't work unless I have a fixed image size.

    Is there a fix for this? To center align images if I have different sizes to cater to?
     
  2. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Not knowing how your code is currently setup I'll offer a couple solutions. First you could place the image inside a paragraph (or a div):

    HTML:
    <p class="img"><img src="..." alt="..." /></p>
    CSS:
    p.img {
     text-align: center;
    }
    Second way, if you have a bunch of images, make a list out of them.
    HTML:
    <ul class="images">
      <li><img src="..." alt="..." /></li>
      <li><img src="..." alt="..." /></li>
      <li><img src="..." alt="..." /></li>
    </ul>
    CSS:
    ul.images {
     margin: 0; padding: 0;
     list-style: none;
    }
    ul.images li {
     margin: 0; padding: 0;
     text-align: center;
    }
     
  3. thread starter macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #3
    While both methods look like a possible solution I have not yet tried, it would involve a lot of work on my part. I am looking for a solution which automatically center aligns images without me having to edit every single post.

    Here's how my structure looks like:

    Code:
    <div class="post-content">
            <p><img src="" alt="" /></p>
    </div>
    I do not want my text to center align too. I just want my images to center align, how can I do that without having to add classes to my paragraphs?
     
  4. macrumors regular

    Joined:
    May 1, 2008
    #4
    Well, you could try relative units like percent, and do something like:

    Code:
    .postcontent p img {
         position: absolute;
         left: 50%;
    }
    
    Using your same code though, I might recommend adding a selector for the image hovers too:

    Code:
    .postcontent p img, .postcontent p a:hover img {
    display:block;
    margin:0 auto;
    }
    
    Assuming your code us structured <p><a><img> . . . this will give the image hover state the same properties as the centered non-linked image.
     
  5. thread starter macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #5
    The above methods won't work.

    1) I am using a fixed width layout, and using absolute will definitely not set things right.

    2) Display: block would work perfectly if the image was not linked. In my case, it is. That is why I want the link to change color only when I hover over the image, not when it is over the same block area.

    Thanks for your suggestion though.

    Is there anyone who could help me solve this problem?
     

Share This Page