How to Vertical Align an Inline-Block in a Line of Text

Vertically centering text within an inline-block

Wrap your text with a span (Centered), and write another empty span just before it(Centerer) like this.

HTML:

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class='Centered'>Link</span>
</a>

CSS

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Take a look here: http://jsfiddle.net/xVnQ6/

Align inline-block DIVs to top of container element

Because the vertical-align is set at baseline as default.

Use vertical-align:top instead:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Or as @f00644 said you could apply float to the child elements as well.

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.

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.

Vertically align text to middle of inline-block

If your have a text which is restricted to single line then line-height would be the best solution.

try with this

line-height:220px; /*height of your container */

JsFiddle Demo

How to vertical align an inline-block in a line of text?

code {    background: black;    color: white;    display: inline-block;    vertical-align: middle;}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

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 can't align middle text inside anchor inline-block

You can vertically align inline-block elements using a pseudo element like this:

.inner a:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
 }

See demo below:

.outer {  position: relative;  height: 400px;}
.inner {  position: absolute;  top: 0;  bottom: 0;  text-align: center;  font-size: 28px;  font-weight: bold;  height: 100%;  border: 1px solid #000;}
.inner a {  text-decoration: none;  display: inline-block;  border: 1px solid #ff0000;  padding-left: 18px;  padding-right: 18px;  height: 100%;  vertical-align: middle;}
.inner a:after {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;}

<div class="outer">  <nav class="inner">    <a href="#">link</a>    <a href="#">link</a>    <a href="#">link</a>  </nav></div>

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.

---

Related Topics