Grow your CSS skills. Land your dream job.

Aligning text next to an image

  • # December 7, 2010 at 8:37 pm

    Hello again.

    I would like some help with aligning a h2-title next to an image. I’d like the title to be vertically in the middle, hence the line-height: 34px; but I honestly don’t know what to do.

    I tried using the align: “left”; to the img, but since that’s not allowed anymore, I couldn’t find a way in CSS to do the job.
    The code is as follows:


    And the CSS for it:

    #sidebar-wrapper {
    margin-top: 0px;
    padding-bottom: 30px;
    width: 300px;
    float: right;
    }

    #sidebar {
    padding: 0 10px 0 10px;
    color: #666666;
    font-size: 11px;
    line-height: 15px;
    }

    .widget h2 {
    line-height: 34px;
    }

    .ikon {
    I've tried the most, but couldn't find a proper way to do what I want
    }

    Thanks in advance,
    Kralle

    # December 8, 2010 at 7:32 am

    Try this:


    .widget h2 {
    display: inline-block;
    }
    .ikon {
    vertical-align: middle;
    }

    You’ll have to wrap the ‘regular’ text in a block level element ( p tags should be fine) or they will appear next to the heading as well.

    Because the h2 is a block it occupies 100% width by default!

    Hope this helps.

    # December 8, 2010 at 10:19 am

    Thanks a lot for your help. I learned something new today, wuhu!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".