-webkit-baseline-middle and -moz-middle-with-baseline

Question

When using browsers web inspectors I came across two different and non-standard property for the CSS attribute vertical-align.

-webkit-baseline-middle is only available in Chrome while -moz-middle-with-baseline is available on Firefox. The naming is similar but NOT the same.

I couldn't find any information regarding these two on the web. They are not even listed on MDN.

My questions:

• Are they part of any standards?
• What is the expected behavior when using them?

Answer 1

@VSG24:
Are they part of any standards?

Both properties are not part of any standards, according to W3C CSS reference. They only seem to be used by Webkit and Gecko to behave correctly, as expected in CSS 2.1 specification:

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
CSS 2.1 specs, p170

---

@VSG24:
What is the expected behavior when using them?

After some search on the web, here's what I've found about -webkit-baseline-middle on the Safari CSS Reference:

vertical-align: -webkit-baseline-middle:
The center of the element is aligned with the baseline of the text.

I was unable to get any info about -moz-middle-with-baseline other than this one :

Q: Webkit-baseline-middle - are there alternatives?

A: the same, only for Mozilla
>vertical-align: -moz-middle-with-baseline;

https://toster.ru/q/255210

---

Below is a test, you may try it using Webkit based browsers (such as Chrome) and Gecko (Firefox):

div {
  width: 15%;
  height: 100px;
  display: inline-block;
  box-sizing: border-box;
}

hr {
  width: 100%;
  position: absolute;
  top: 90px;
  height: 1px;
  background: hotpink;
  border: none;
}

.container {
  border: 2px solid hotpink;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: -1;
}

.reference {
  background: darkblue;
}

.standard {
  background: teal;
  vertical-align: middle;
}

.moz {
  background: antiquewhite;
  vertical-align: -moz-middle-with-baseline;
}

.webkit {
  background: darksalmon;
  vertical-align: -webkit-baseline-middle
}

<div class="container">
  <hr />
  <div class="reference"></div>
  <div class="standard"></div>
  <div class="moz"></div>
  <div class="webkit"></div>
</div>

---

References :

• Safari and WebKit implement a large subset of the CSS 2.1 Specification defined by the World Wide Web Consortium (W3C), along with portions of the CSS 3 Specification. This reference describes the supported properties and provides Safari availability information. If a property is not listed here, it is not implemented by Safari and WebKit.
  Safari CSS Reference
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Hope I helped a bit :)