jCarousel滑块中心图像

Question

我在一个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;


}

Answer 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。