內聯圖像居中<ul>

Question

對於我制作的一個簡單的輪播，有一種非常簡單的方法可將圖像居中放置在每個<li>內部。

它在初始頁面加載時效果很好，但是當我點擊刷新時，圖像開始有點混亂並且什么也不居中（請參閱下面的圖像）

這是我的jQuery方法：

$ul.children('li').each(function(){
        var $pic = $(this).children('img');
        var height = $pic.height();
        $pic.css({ paddingBottom: (200 - height)/2 + 'px' });
});

初始加載視圖：

頁面刷新視圖：

不知道為什么會這樣，我只能懷疑這是由於圖像緩存造成的。 如果您想轉到實時鏈接，請在此處查看http://www.metsales.com/metropolitansales/constantcontact/td/acrobat.aspx ？

我在這里先向您的幫助表示感謝。

Answer 1

最近，在這種情況下，我正在使用translateY。 應該是這樣

li {
    width: xxx; // set the item width
    height: xxx; // set the item height
    position: relative;
}

img {
    top: 50%;
    position: absolute;
    transform: translateY(-50%); // This should make the image go in direction to the top using 50% of its height value
}

提示：您應該避免<li>中的填充。

再見！

Answer 2

你li ■不要正確對齊。 您可以做的一件事是使ul真正變寬並使您的li漂浮在其中。 將此添加到您的CSS：

ul {
  width: 1000%;
}

li {
  float: left;
  height: 200px;
}

並刪除設置填充和邊距的js，並將其更改為：

 $ul.children('li').each(function(){
    var $pic = $(this).children('img');
    var height = $pic.outerHeight();
    $pic.css({ marginTop: (200 - height)/2 + 'px' });
 });

Answer 3

解決方法

 $ul.children('li').each(function(){
    var $pic = $(this).children('img');
    var height = $pic.outerHeight();
    $pic.css({ marginTop: (200 - height)/2 + 'px' });//remove this line
 });

因為您需要刪除margin-top: -100px; 在img標簽中還添加了vertical-align: middle;

carousel li有padding: 5px; 在您的情況下，您不需要頂部和底部填充，但是它是可選的，可以使hover