Question

我正在使用flex滑块jquery插件

如何使用动态宽度和高度集中滑块内的图像？

<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*/
}

Answer 1

如果你想要一个好的解决方案，那么你可以使用jQuery UI position（）函数，否则使用这个查询：

$(".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" });
});

Answer 2

这是一个简单有效的jQuery解决方案。将其添加为新答案，因为它与我上面的其他答案非常不同。

CSS方式似乎很混乱，我不完全确定@ user1743214的建议适用于FlexSlider。

我已经复制了一些FlexSlider代码并在JSFiddle中进行了设置。它不是动画或任何东西，但你有正确的结构和风格。

http://jsfiddle.net/cmp3R/1/

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

你需要使用每个（）为滑块中的每张幻灯片运行它，它应该偏移正确的数量，使它们垂直居中。

如果您使用插件的响应功能，我可以看到这是一个问题，但可以通过使用<li>查询为每个屏幕大小设置不同的@media高度来解决这个问题。

希望有所帮助。

Answer 3

您可以尝试在img

上使用text-align：center

Answer 4

尝试使用自动边距水平居中，仅影响图像列表。如果您想将其垂直居中，则可能需要设置margin-top和margin-bottom。

li img
{
  margin-left: auto;
  margin-right: auto;
}

Answer 5

我不确定我完全理解你的问题，因为：

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;

Answer 6

现在只是为了包装你，css方式.. 如果你想减少头痛，这就是你要做的事情

.image {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   height: 200px;
   margin-top: -100px; /* half the height */
   margin-left: -100px; /* half the width */
}

这种类型在行居中调用，这意味着您可以在行中对这些样式应用这些样式。

现在另一种方式有点复杂但使用频繁，但您可能会看到它使用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

他的代码更像是内联中心技术

Answer 7

这是汤姆解决方案的修改版本，也解决了不知道图像或<li>高度的问题。

找出最高<li>的高度，并将所有图像<li>调整到该高度。

$(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。

Answer 8

所以我试图用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);
  }
});

代码非常明显，希望它有所帮助！

Answer 9

如何在flexslider容器的li标签内创建一个固定高度的div标签

<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="mydiv">
                <img ...>
            </div>
        </li>
    </ul>
</div>

.mydiv{height: 200px; display: table-cell; vertical-align: middle}

Answer 10

要在Flexslider中将图像水平设置为居中，只需在 flexslider.css 文件中进行如下更改。

找到 .flexslider .slide img 并进行如下更改。

.flexslider .slides img {
  /*width: 100%;*/ or you can use width: auto;
  display: block;
  margin: 0 auto;
}

不需要进行所有计算。

将lig标记置于li标签内

10 个答案: