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

あなたの<li>要素はおそらくあなたの画像を包み込んでいます。あなたはそれに固定の高さを与える必要があります、あなたの場合、私は480pxだと思います。

次に、画像を垂直方向に中央に配置する必要があります<li>：これはそれを行う1つの方法です（私もここにインラインスタイルを移動しました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 に答える
0

問題は、要素がfloatであることです。使いたい場合

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

次のようなことも試してみてください

float: none!important;

li要素で。

于 2013-03-03T20:34:37.430 に答える