How to Vertically Align Inline Elements

How to vertically align inline elements

You can make it inline-block and give it a line-height:

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle with working example: http://jsfiddle.net/KgqJS/

vertical-align with inline elements

vertical-align aligns the inline elements with each other, it doesn't position them within their container.

So if for example you have a taller vertical-align: middle inline element in the same div, the "Hello" will be centred relative to it:

div {  height: 300px;  width: 300px;  background-color: aqua;  margin-bottom: 10px;}div > span {  vertical-align: middle;  background-color: orange;  font-size: 3em;}.big {  font-size:200px;}

<div>  <span>Hello!</span>  <span class="big">B</span></div>

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 middle on inline elements slightly off

Well this is because a default line-height is applied to the elements by browsers user agent...So you have to play with some vertical-align values...use text-bottom

p {  font: 10pt Arial, sans-serif;}
.icon {  vertical-align: text-bottom;}

<p>This is some text with an <img src="https://i.imgur.com/IJs3M2P.png" class="icon" alt="Icon" width="16" height="16">icon in it.</p>

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

---

In a nutshell _{^{(and to prevent link rot)}}:

• Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
• For block elements, vertical alignment is harder and strongly depends on the specific situation:
  
  • If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
  • If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
  • … there are more such special cases.

How to change vertical alignment of inline element?

There's some tricks to getting vertical alignment to work. Here's a good stackoverflow answer about it. There's a good comment to the answer which explains why you need the empty span...

Well, I figured I'd offer you an alternative. You use an empty <span>
because vertical-align aligns elements relative to their siblings. If
an element has no siblings, it will not be vertically aligned.

I also made an update to your fiddle

Here's a snippet of the css:

span { 
    vertical-align: middle;
    display: inline-block; }
ul{
    margin:0; padding:0;
    display:inline-block;
    list-style-type:none; 
    vertical-align:middle; }
#navi {
    height: 100px;
    background: #ed7a4f;
}
#navi li{   
    display: inline-block;
    padding: 5px; }

Vertical-align two inline-block elements

.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/

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.

---

Related Topics