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:
@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;
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 :
Hope I helped a bit :)