1

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


}
4

2 回答 2

0

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

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

你也应该尝试类似的东西

float: none!important;

在li元素上。

于 2013-03-03T20:34:37.430 回答
0

您的<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)) {
?>

有关其他垂直居中方法，请参阅此链接。

于 2012-11-13T11:45:54.627 回答