裏面我使用Flex滑塊jQuery插件圍繞IMG標籤的L1標籤
我如何集中處理與動態的寬度和高度滑塊裏面的圖片？
<div class="flexslider">
<ul class="slides">
<li><img .../></li>
<li><img .../></li>
</ul>
</div>
ul.slides li
{
margin: 0px; padding: 0px;
text-align:center;
}
ul.slides li img
{
width: 100%;
/*display: table-cell; vertical-align: middle; does not work*/
}
下面是一個簡單有效的jQuery爲你解決。添加這個作爲一個新的答案，因爲它與我上面的另一個非常不同。
CSS的方式似乎很混亂，我不完全確定@ user1743214的建議將與FlexSlider一起使用。
我已經複製了一些FlexSlider代碼並將其設置在JSFiddle中。它不是動畫或任何東西，但你有正確的結構和樣式。
jQuery代碼（爲方便起見/歸檔）
$('.slides li').each(function() {
var height = $(this).height();
var imageHeight = $(this).find('img').height();
var offset = (height - imageHeight)/2;
$(this).find('img').css('margin-top', offset + 'px');
});
CSS改變
您需要設置一個高度爲<li>包裝每張幻燈片的。你可以在CSS中做到這一點。
jQuery的
你得到滑塊的高度（即X）的圖像（即Y）的和，得到的差異，差的一半，然後添加一個內聯樣式通過移動圖像下降那個數額。 IE瀏覽器。
= (x-y)/2
您需要在滑塊使用每個（）每張幻燈片上運行這一點，它應該抵消了正確的量，使他們垂直居中。
如果您使用插件的響應功能，但可以通過使用@media查詢爲每個屏幕大小設置不同的<li>高度來解決這個問題。
希望有所幫助。
你可以嘗試使用文本對齊：中心，在IMG
它不起作用 –
嘗試使用自動利潤率水平居中隻影響圖像的列表。如果您也想垂直居中，您可能需要設置margin-top和margin-bottom。
li img
{
margin-left: auto;
margin-right: auto;
}
這將幫助我水平地集中圖像，我如何垂直做？ –
如果你想有一個很好的解決方案，那麼你可以使用jQuery UI位置（）函數以其它方式使用此查詢：
$(".slides li img").each(function() {
var w = $(this).width();
var h = $(this).height();
var wi = $(this).parent().width();
var he = $(this).parent().height();
var margintb = ((he-h)/2);
var marginlb = ((wi-w)/2);
$(this).css({ "margin": margintb+"px "+marginlb+"px" });
});
，並且可以使用使用基於CSS的解決方案：
li img {
margin:0 auto;
}
li {
line-height: *px;
}
其中*是li元素的高度，如果它具有動態寬度和高度，那麼一些jQuery會發揮作用。
$(".slides li").each(function() {
var s = $(this).height();
$(this).css({ "line-height" : s+"px" });
});
+1爲jquery解決方案 –
希望所有這些東西可以幫助你！ –
我不知道我完全理解你的問題，因爲：
ul.slides li img {
width: 100%;
/*display: table-cell; vertical-align: middle; does not work*/
}
你一樣寬使圖像的滑塊，使定位不應該的問題？
無論如何，在<li>內，您可以使用margin:auto（使用FlexSlider進行測試）對圖像進行居中。
但是你想中心滑塊本身？
編輯：要垂直對齊你可以嘗試display: inline-block; vertical-align: middle;
我正在嘗試對齊圖像的高度<垂直位於滑塊中心的最大圖像的高度。我嘗試了上述解決方案，但沒有奏效。 –
現在來包裝這件事對你來說，CSS的方式.. 在這裏，如果你想少頭痛
.image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px; /* half the height */
margin-left: -100px; /* half the width */
}
這種類型被稱爲行中心，這意味着你可以將這些樣式應用於一行中的對象..
現在另一種方式是更復雜一點，但廣泛使用d但是，如果你願意，你可以搜索更多關於這個話題，因爲它比蓋越多，你可能會看到其應用使用div的和不斷變化的還有顯示錶
html, body, #cont {
height:100%; // set the height to be the full page , as well as the width
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#cont td {
vertical-align: middle;
text-align: center;
}
HTML標記
<html>
<body>
<table id="cont">
<tr>
<td><img src="image.png" alt="" /></td>
</tr>
</table>
</body>
</html>
現在..
的jQuery的一部分，你可以搜索插件，或者您也可以通過 @Aspiring Aqib使用建議的代碼
他的代碼更像是內嵌中心技術
這裏是Tom的解決方案的修改版本，它也解決了不知道圖像或高度的問題。
找到最高的<li>的高度，並將所有圖像<li> s調整到該高度。
$(document).ready(function() {
var maxHeight = -1;
$('.slides li').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.slides li').each(function() {
$(this).height(maxHeight);
});
});
在每個<img>之前插入一個元素。
$(function() {
$('img').before('<span class="vert-center"></span>');
});
設置你的新元素父<li>的100％和垂直對齊和圖像。
.slides {
text-align: center;
position: relative;
}
.vert-center {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.slides img {
display: inline-block;
vertical-align: middle;
}
查看Demo。
所以我試圖完成同樣的事情flexslider，這裏是如何我已經做到了：
var centerImage = function (sliderH, n) {
var $current = $('.js-slider .slides li img').eq(n);
$current.css({
'position' : 'relative',
'top' : (sliderH - $current.height())/2
});
};
$('.js-slider').flexslider({
/*
other flexslider parameters
*/
start: function (slider) {
centerImage(slider.h, slider.currentSlide);
},
before: function (slider) {
centerImage(slider.h, slider.animatingTo);
}
});
代碼是不言自明，希望它幫助！
如何創建flexslider容器
<div class="flexslider">
<ul class="slides">
<li>
<div class="mydiv">
<img ...>
</div>
</li>
</ul>
</div>
.mydiv{height: 200px; display: table-cell; vertical-align: middle}
的L1標籤內的固定高度的div標籤，如果你只需要水平中心，然後嘗試'保證金：汽車;左：0;右：0;' –