Css Vertical Alignment of Inline/Inline-Block Elements

CSS vertical alignment of inline/inline-block elements

vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

See: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.

Vertical align not working on inline-block

It doesn't work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:

This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.

A line box is

The rectangular area that contains the boxes that form a line

When you see some text which has multiple lines, each one is a line box. For example, if you have

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

CSS: Vertically aligning inline-block element in a line of text

Vertical-align doesn't work like you would think it would. It's used in HTML tables, but doesn't work in divs. It's been a pain for a while. Luckily, nowadays you can achieve this easily with flexbox.

To achieve this, wrap your two bits of copy in individual span elements, so your structure looks like:

<div class="button-content">
    <span>buy for</span>
    <div class="icon"></div>
    <span>1000</span>
</div>

Then your css should look like this:

.button-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 130px;
}

Or if you can't support flexbox, your .button-content can be set to display: table-cell; and the vertical-align: middle; should work.

I strongly recommend flexbox.

Wrong vertical alignment of inline-block divs

display: inline-block is vertically aligning your cards along the bottom (baseline) of the text within them, because the default ("initial value") for vertical-align is baseline.

Add vertical-align: top to it's CSS and everything should line up nicely.

Vertical align: top on inline block divs

Add below css and check

.col-33 {
    width: 32.5%;
    display: inline-block;
    padding: 0;
    vertical-align: top;
}

Css Vertical Alignment of Inline/Inline-Block Elements