將span元素放置在圖像旁邊，但是垂直居中

Question

我想要一個圖像幻燈片，其中包含形成圖像整個右邊框的下一個按鈕。是否可以在紅色區域的中央顯示「NEXT」字樣，而不是與圖像位於同一行？

<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; 
} 

小提琴這裏：

http://jsfiddle.net/PUQNg/217/

Answer 1

你有幾件事錯了你的HTML和CSS，你應該糾正：

• span不是ul有效的孩子，使此li而不是
• 有沒有點牛逼已經在lidisplay: block;和display: inline-block;，只有最後display屬性將用於

要集中在這種情況下，文本我會用line-height組到李的height。

li { 
 
    border: 1px solid #000000; 
 
    display: inline-block; 
 
    height: 100px; 
 
    vertical-align: middle; 
 
    width: 200px; 
 
} 
 
.next { 
 
    background-color: red; 
 
    border: 0; 
 
    line-height: 100px; 
 
    width: auto; 
 
}

<ul> 
 
    <li></li> 
 
    <li class="next">NEXT</li> 
 
</ul>