html - 如何在 上使用垂直对齐属性？

Question

我试图在每个 <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/

Answer 1

这是因为你的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;
}