WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Override CSS for Image Alignment? (5 posts)

  1. jabrieske
    Member
    Posted 7 years ago #

    Is there a trick to overriding the CSS when aligning images in WordPress? For 95% of my images, I want them aligned to the right. I'm unable to align the other 5% to the left, though, even if I add "align=left" to the image tag. Any thoughts?

    Thanks!!!

  2. moshu
    Member
    Posted 7 years ago #

    You don't add "align=left".
    You should add a class, e.g. <img src=....etc. class="leftpic" />
    and then define that class in the stylesheet :)
    .leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

  3. jabrieske
    Member
    Posted 7 years ago #

    Thanks for replying.

    You'll have to excuse me as I'm learning HTML and CSS as I go along here. I tried a few different things and none worked.

    Here's the CSS code for my standard image formatting:

    .post img {
    float:right;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    I put the leftpic code right after, and tried a few different formats, including:

    .post leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }
    ----------------------------------
    leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }
    ----------------------------------
    and exactly how you wrote it:
    .leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    Any thoughts?

    Thanks!

  4. whooami
    Member
    Posted 7 years ago #

    .post img {
    float:right;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    that aligns ALL images inside this <div class="post ...>` to the right.

    .post leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    that doesnt do anything since lefttpic is not a tag.

    Similarily, this wont work, as leftpic is not a tag:

    leftpic {
    float: left;
    border:0px solid <?php echo $water_maincolor_1; ?>;
    margin:0 0 0 0;
    }

    the above 2 examples assume you are doing this:

    <leftpic src="http://www.blah.com/image.gif />

    You arent.

    img.leftpic {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    }

    will work, as long as you do this:

    <img class="leftpic" src="http://www.blah.com/image.gif />

  5. jabrieske
    Member
    Posted 7 years ago #

    NICE! Works like a charm. Thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Topic