WordPress.org

Ready to get started?Download WordPress

Forums

Image Caption Alignment Help (6 posts)

  1. JRiley21
    Member
    Posted 2 years ago #

    I need some help with my image captions. Basically, I just want to line everything up with the post content. Right now, the margins aren't set correctly and for the life of me I can't get caption images to respond to any of my code changes.

    Here's an example of what I'm talking about. (notice the mis-alignment compared to the post content)

    Do I need to define a whole new CSS class for this? If so, what would that be called?

    I appreciate any/all help! Thanks. :)

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    notice the mis-alignment compared to the post content

    Um - no. On your home page, I see quite normally centred post captions.

  3. JRiley21
    Member
    Posted 2 years ago #

    Thanks for the quick reply. I think I probably explained this pretty poorly, I apologize.

    It's the image positioning on captioned photos. For example, the image on the post I attached above sits about 10px too high and maybe a few pixels in from the left border.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Ah! Now I see it! style.css - change:

    notice the mis-alignment compared to the post content.wp-caption {
        background-color: #F8F8F8;
        border: 1px solid #DDDDDD;
        line-height: 0;
        margin: 0 5px 10px;
        padding:0;
        text-align: center;
    }

    to:

    .wp-caption {
        background-color: #F8F8F8;
        border: 1px solid #DDDDDD;
        line-height: 0;
        margin: 0 5px 10px;
        padding: 5px 0 0;
        text-align: center;
    }
  5. JRiley21
    Member
    Posted 2 years ago #

    Esmi- Thanks, that helped with aligning the image inside the caption area,which is great, but not entirely what I was going for. :)

    I need the entire image (with the caption) to line up with the post content.

    Here's an illustration referencing the spacing issues that I'm talking about: Here.

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    style.css:

    #content p, content li {
    	font-family: Verdana,Arial,Geneva,Helvetica,sans-serif;
    	font-size: 12px;
    	letter-spacing: normal;
    	line-height: 16px;
    	color: #444444;
            padding-top: 8px;
    	margin-top: 5px;
    }

    these lines are causing the image 'misalignment':

    padding-top: 8px;
    margin-top: 5px;

    possibly change top to bottom to keep the paragraph spacing.

Topic Closed

This topic has been closed to new replies.

About this Topic