一个元素的行高影响了旁边元素的位置

Question

<li>设置了高度和相同的行高，里面的<div>(圆点)设置成display:inline-block;使其垂直居中。圆点右边是<span>标签里的文字。<span>设置成display:inline-block;然后给了宽度。因为文字太多要换行，所以给<span>设置了行高，是<li>高度的一半。但是设置之后却影响了左边圆点的垂直居中，使圆点下移了。请问这是为什么？

如果<span>的行高设置成50%，圆点是正常垂直据居中了，但换行的文字就挤在一起了。发现此时50%的行高是相对字体大小而言的。字体大小是16px，所以这里行高就变成了8px了。为什么是这样？

怎么样在使用行高的方法垂直居中的情况下让<li>里的文字即使换行也是正常居中？

Answer 1

这个问题其实很好解决呀,div.dot span 都要了，冗余用不着的
设置 li 的padding-left
让 li:before 作为小圆点，绝对定位与左侧，垂直居中

html:
<ul>
    <li>标题标题标题标题标题标题标题标题标题</li>
</ul>

css:
li {
    padding-left: 0.8rem;
    position:relative;
}
li:before {
    content:'';
    display:inline-block;
    width:0.2666rem;
    height:0.2666rem;
    position:absolute;
    left:0.2666rem;
    top:50%;
    margin-top:-0.1333rem;
    border-radius:50%;
    background: green;
}

Answer 2

div(圆点) > line-height = 父元素行高 ; verticle-align:top;

Answer 3

li {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

Answer 4

怎么样在使用行高的方法垂直居中的情况下让<li>里的文字即使换行也是正常居中？
问题太长。。我只看到最后的重点..

line-height or
position or
浮动 左右布局