CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18859

Vertical-align two inline-block elements

I have two inline-block div elements that I'd like to vertically align. They both contain different amounts of text, but the smaller one just aligns at the bottom.

Here's my HTML:

<div class="work-item">
    <div class="image-container">
        <p></p>
    </div>
    <div class="text-container">
        <p></p>
    </div>
</div>

And my CSS:

.work-item {
    width: 100%;
    padding: 50px 0;
}

    .work-item .image-container, .work-item .text-container {
        display: inline-block;
    }

    .work-item .image-container {
        width: 33%;
    }

    .work-item .text-container {
        width: 60%;
    }

    .work-item .text-container p {
        margin: 0;
    }

You can see a JSFiddle here: http://jsfiddle.net/jedhep7x/

I've tried setting the div height to 100% and setting the vertical-align to middle, but that doesn't fix it at all.

Anyone know what I'm doing wrong here?

Upvotes: 6

Views: 9907

Answers (2)

Aru
Aru

Reputation: 1870

update your CSS with the below

The CSS:

.work-item {
    width: 100%;
    padding: 50px 0;
    display:table;
}

    .work-item .image-container, .work-item .text-container {
        display: table-cell;
        vertical-align:middle;
    }

You can see a JSFiddle here: http://jsfiddle.net/jedhep7x/2/

Upvotes: 2

Christina
Christina

Reputation: 34652

.work-item {
    width: 100%;
    padding: 50px 0;
}
.work-item .image-container,
.work-item .text-container {
    display: inline-block;
    vertical-align: middle; /* add me */
}
.work-item .image-container {
    width: 33%
}
.work-item .text-container {
    width: 60%
}
.work-item .text-container p {
    margin: 0
}

DEMO: http://jsfiddle.net/jedhep7x/1/

Upvotes: 17

Related Questions