jCarousel 滑块中心图像答案

【问题标题】：jCarousel slider center imagejCarousel 滑块中心图像
【发布时间】：2012-11-13 11:20:07
【问题描述】：

我在 jquery jcarousel 控件中显示一些图像。

我为所有图像设置了最大宽度和最大高度，这样它们就不会丢失原始外观。我的问题是小图像，它们水平居中，但我无法让它们垂直居中。它们显示在顶部中间。

这是我用来在控件上加载图像的 php 代码：

<div align="center">
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <?while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC)) {?>
           <li><img src="imagenes_bariatrica/<?=$fila["archivo"];?>" style="max- height:480px; max-width: 360px;" alt="<?=$fila["comentario"];?>"/>
            </li>
        <?}?>
    </ul>
</div>

这是最重要的 jCarousel css 代码：

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
    border: 2px solid #096D0A;

}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 500px;
    padding: 20px 40px;

}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 500px;
    height: 375px;
    padding: 40px 20px;

}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  500px;
    height: 370px;

}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  500px;
    height: 370px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 500px;
    height: 375px;


}

【问题讨论】：

标签： jquery image slider jcarousel

【解决方案1】：

您的<li> 元素可能环绕您的图像。你需要给它一个固定的高度，在你的情况下我认为是 480px。

然后你还需要在<li> 中垂直居中图像：这是一种方法（我也将img 的内联样式移到这里）：

#mycarousel li { line-height: 480px; }

#mycarousel li img { 
    max-height:     480px;
    max-width:      360px;
    vertical-align: middle;
}

您可以使用.jcarousel-skin-tango 选择器而不是#mycarousel 来应用于该类的所有轮播。

顺便说一句，最好使用 PHP 长标签：

<?php
    while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC)) {
?>

有关其他垂直居中方法，请参阅this link。

【讨论】：

如果我给定一个固定的高度，大多数图像都会变形
你没有给图像一个固定的高度——只给包含的列表项。 img 只有一个 max 尺寸规格 - 这是您设置的尺寸规格。
我必须将类设置为 img 吗？
不，jCarousel 应该自己设置类。但请先尝试使用#mycarousel 选择器（图像将通过img 内li 内#mycarousel 来识别）。我试过了，它成功了（我使用了三个图像，更小，更大，等于 360x480。不过还没有尝试过各种纵横比！）。

【解决方案2】：

问题在于元素是浮动的。如果你想使用

display: table-cell; 
height: 400px;
vertical-align: middle;

你也应该尝试类似的东西

float: none!important;

在 li 元素上。

【讨论】：