jCarousel滑塊中心圖像

我在jquery jcarousel控件中顯示了一些圖像。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; 


}

來源

2012-11-13 martin.softpro

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

來源

2012-11-13 11:45:54 LSerni

如果我給一個固定的高度，大多數圖像會變形 –

您不給圖像的固定高度 - 僅限於包含列表項。 img只有* max * size規格 - 這是您設置的規格。 – LSerni

我是否必須將類設置爲img？ –

問題是元素是漂浮。如果你想使用

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

你也應該嘗試李元素像

float: none!important;

。

來源

2013-03-03 20:34:37 tabacitu

jCarousel滑塊中心圖像

回答

相關問題