Q:

Place span element next to image, but at the center vertically

I'd like to have an image slideshow with a next button that forms the entire right border of the image. Would it be possible to have the words "NEXT" display in the center of the red area, instead of on the same line as the image?
<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;
}

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

A:

You have a few things wrong with your HTML and CSS that you should correct:

span is not a valid child of ul, make this a li instead
There's no point having display: block; and display: inline-block; on li, only the last display property will be used

To centralise the text in this case I would use a line-height set to the height of the li.

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>

