将滑块内的中间动态图像与绝对位置对齐

时间:2014-11-07 19:33:22

标签: css centering

我有以下css。我想在中心对齐图像。但它不起作用?

element.style {
}
.bx-wrapper .bxslider li img {
    max-width: 100% !important;
    height: auto !important;
}
.bxslider img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
}
.bx-wrapper img {
    max-width: 100%;
}
img {
    border: 0;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}

HTML:

<ul class="bxslider" style="width: 860%; transform: translate3d(545.5px, 0px, 0px); vertical-align: middle; display: block; height: 465px; transition-duration: 0s;">
    <li class="bxslider_imge bx-clone" style="float: left; list-style: none outside none; position: relative; width: 760px;"> 
        <img alt="buk" src="/uploads/thumbs/52.jpg" data-image-original-path="/uploads/thumbs/52.jpg" title="Buk" data-image-thumb-path="/uploads/thumbs/52.jpg" data-image-id="17610" data-thumb-loaded="0"> 
    </li> 
    <li class="bxslider_imge" style="float: left; list-style: none outside none; position: relative; width: 760px;"> 
        <img alt="itc" src="/uploads/thumbs/e7.jpg" data-image-original-path="/uploads/thumbs/e7.jpg" title="ITC" data-image-thumb-path="/uploads/thumbs/e7.jpg" data-image-id="17607" data-thumb-loaded="1">   
    </li>
</ul>

1 个答案:

答案 0 :(得分:0)

要垂直对齐中间,我喜欢使用:

.elem {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

当然,您需要所有供应商前缀( - webkit-transform,-moz-transform)
这是compatible所有主要浏览器(IE9及以上)