Question

我在我的网站上使用了一个可爱的小型免费开源滑块，但是在不同的浏览器和分辨率下，内部的图像不会与我的顶部和底部边框齐平。为了纠正这个问题，我尝试使用更大的图像，因此总会出现一些问题。事实是，我需要将图像从任何分辨率的中心强制坐在中心 - 你知道我的意思吗？我需要它来从图像中心读取对齐...

希望有道理，网站可以在youthenterprise.co.uk/coded/bank.php上看到（那里的图片让我更加明显地想要实现的目标）以及这里的图片脚本和代码：

    <link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
  $(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<div id="slider">
        <ul class="bxslider">
         <li><a href="funding.php"> <img src="images/slides/funding.gif" alt="01" border="0" /></a></li>
         <li><a href="case.php"><img src="images/slides/case.gif" alt="02"border="0" /></a></li>
         <li><a href="start.php"> <img src="images/slides/start.gif" alt="03" border="0" /></a></li>
         <li><a href="resources.php"> <img src="images/slides/resources.gif" alt="04" border="0" /></a></li>
         <li><a href="links.php"> <img src="images/slides/links.gif" alt="05" border="0"/></a></li>
         <li><a href="contact.php"> <img src="images/slides/contact.gif" alt="06" border="0"/></a></li>
  </ul>


</div><!--slider close-->

CSS：

#slider {
    width: 100%;
    background:url(images/slider_divider.gif) 0 bottom repeat-x;
    height: 255px;
    border: none;
    text decoration: none;
    z-index: 0;
}

.bx-wrapper {
    width: 100%;
    *zoom: 1;
}

.bx-wrapper img {
    margin-top: -100px;
    margin-left: auto;
    alignment-adjust:central; !important
    zoom: 1;
    *width: 2000px;
    *margin-left: -100px;
    *padding-left: 60px;
    *margin-top: -70px;
}



.bx-wrapper .bx-viewport {
    margin: 0 auto;
    padding: 0;
    background: #fff;
    height: 249px !important; //provide height of slider
    max-width: 2000px;
    min-width: 960px;
    overflow: hidden;



    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    width: 100%;
}

我感谢任何人都能给予的任何帮助，即使只是说它无法完成！

此外，它需要与IE7兼容，要求我这样做的人只能访问非常旧的设备（具有IE7和800px分辨率的旧XP机器！）

CSS vertical＆amp;水平对齐，无论屏幕分辨率如何

0 个答案: