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。

Answer 2

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

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

你也应该尝试像

这样的东西

float: none!important;

li 元素

。

jCarousel滑块中心图像

2 个答案: