Vertically-Aligned Inline-Block Element Not Perfectly Centered Within Container

Vertically-aligned inline-block element not perfectly centered within container

vertical-align: middle; was never meant to center the element. Here is a more trivial example to better see:

p {  background:     linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */    red;  line-height: 80px;  font-size:80px;  display: block;}
span {  height: 18px;  width: 18px;  display: inline-block;  background: lightblue;  vertical-align: middle;}

<p>  <span></span>  <-- Not aligned</p>

Vertical align middle is not working properly with two empty inline blocks aligned next to each other?

I'll try to answer your question, possibly it helps to others. In this case, the margin refers to the element itself, and therefore the recalculation is relative to the size of your element, including the margin

examples:

---

vertical-align: middle on inline-block not working as expected

The div is aligning itself with the baseline of the span. When you set vertical-align: baseline, you'll find the span now aligns itself with the baseline, too.

CSS center display inline block?

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

My inline-block elements are not lining up properly

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

Updated Example

.position-data {
    vertical-align: top;
}

---

Related Topics