Css 将跨度元素放置在图像旁边，但垂直放置在中心

我想有一个图像幻灯片与下一步按钮，形成了整个图像的右边框。是否可以将“下一个”字样显示在红色区域的中心，而不是与图像在同一行上

<ul>
    <li></li>
    <span>NEXT</span>
</ul>

li {
    display: block;
    width:200px;
    height:100px;
    display: inline-block;
    border:1px solid;
}
span {
    background-color:red;
    padding-top:100px;
}

在这里拉小提琴：

---

您的HTML和CSS有一些错误，需要纠正：

span不是ul的有效子级，请将其改为li 没有显示的意义：块；并显示：内联块；在li上，仅使用最后一个显示属性 在这种情况下，为了使文本居中，我将使用设置为li高度的线条高度

李{ 边框：1px实心000000； 显示：内联块； 高度：100px； 垂直对齐：中间对齐； 宽度：200px； } .下一个{ 背景色：红色； 边界：0； 线高：100px； 宽度：自动； } 下一个

---

谢谢你的建议！现在我明白了如何做到这一点：