Question

我有以下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>

Answer 1

要垂直对齐中间，我喜欢使用：

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

当然，您需要所有供应商前缀（ - webkit-transform，-moz-transform）。
这是compatible所有主要浏览器（IE9及以上）

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

1 个答案: