Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
line one
</li>
<li>
<span style="display: inline-block; vertical-align: middle">line two dot one
<br />
line two dot two</span>
</li>
<li>
line three
</li>
</ul>
<div style="height: 200px; line-height: 200px; border-style: solid;">
<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
<br />
line two dot two</span>
</div>
</body>
</html>
As I understand it, vertical-align applies only to inline-block elements, e.g., <img>
. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>
, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>
, or it will inherit from the containing element.