HTML
<html>
<head>
<style type="text/css">
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
</style>
</head>
<body>
<div>
<span>Hello!</span>
</div>
</body>
</html>
In the image below, Actual showcases the outcome of the demonstrated HTML, while Expected depicts the desired design.
https://i.sstatic.net/hSGjp.png
Could it be that the CSS property vertical-align functions in this manner?
Edit :
This inquiry isn't a replication, as my aim is to grasp the performance of vertical-align: middle with inline elements. As illustrated above, maintaining or eliminating the specified property value doesn't impact the HTML configuration.
Edit2 : The demonstration under the section "A more versatile approach" highlighted in the main answer of the linked query mentioned in the reviews, unfolds an alternative format in my browser. My current web browser is Google Chrome Version 47.0.2526.106 (64-bit).
Here's an illustration of how it displays on my browser (varied from the demonstration link):
In the provided image, the span element remains affixed at the top.