0

我正在使用 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*/
}
4

10 回答 10

2

如果你想要一个好的解决方案，那么你可以使用 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" });
});
于 2013-01-24T03:54:49.057 回答
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

您需要使用 each() 为滑块中的每张幻灯片运行它，并且它应该将其偏移正确的量，以便它们垂直居中。

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

希望有帮助。

于 2013-01-24T04:31:23.823 回答
1

您可以尝试在 img 上使用 text-align: center ，

于 2013-01-24T03:49:28.713 回答
0

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

li img
{
  margin-left: auto;
  margin-right: auto;
}
于 2013-01-24T03:53:57.813 回答
0

我不确定我是否完全理解您的问题，因为：

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;

于 2013-01-24T03:58:04.360 回答
0

现在只是为你总结一下，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 建议的代码

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

于 2013-01-24T04:11:26.697 回答
0

这是汤姆解决方案的修改版本，它也解决了不知道图像或<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);
    });
});

在 each 之前插入一个元素<img>。

$(function () {
    $('img').before('<span class="vert-center"></span>');
});

将新元素设置为父元素的 100%，并将<li>其与图像垂直对齐。

.slides {
    text-align: center;
    position: relative;
}
.vert-center {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slides img {
    display: inline-block;
    vertical-align: middle;
}

查看演示。

于 2014-02-06T08:23:21.850 回答
0

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

代码非常不言自明，希望对您有所帮助！

于 2014-03-27T18:56:32.210 回答
0

如何在 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}
于 2014-04-06T06:05:21.393 回答
0

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

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

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

无需进行所有计算。

于 2019-02-15T16:28:14.603 回答