我试图在每个 <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;
}
关于html - 如何在 <li> 上使用垂直对齐属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28812903/