html - 如何在<li>上使用vertical-align属性？

我试图将图像放在每个<li>的中心，但没有成功。

我尝试在display: table;标记上使用<ul>在display: table-cell;上使用<li>。

我尝试在display: table;标记上使用<li>在display: table-cell;标记上使用<img>。

这些方法都不起作用。

<div class="slider-container">
            <div class="scroll-left"></div>
            <div class="slider">
                <ul class="slides">

                    <li class="slide">
                        <img src="http://exaple.com/Button.png" class="makeBig">
                    </li>
                    <li class="slide">
                        <img src="http://exaple.com/Button.png" class="makeSmall">
                    </li>
                    <li class="slide">
                        <img src="http://exaple.com/wp-content/themes/twentyfifteen-child/images/ginger_Button.png" class="makeBig">
                    </li>

                    <li class="slide">
                        <img src="http://exaple.com/Button.png" class="makeSmall">
                    </li>
                    <li class="slide">
                        <img src="http://exaple.com/Button.png" class="makeBig">
                    </li>

                </ul>
            </div>
            <div class="scroll-right"></div>
        </div>

jsfiddle：http://jsfiddle.net/8b47wong/

最佳答案

这是因为float: left;元素上的<li>。尝试将其删除，只需添加display: table-cell; vertical-align: middle;

http://jsfiddle.net/8b47wong/4/

.slider .slide {
    list-style-type: none;
    width: 19.26em;
    height: 11.1em;
    padding: 0!important;
    text-align: center;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}