Fatal编程技术网
  • html/
  • Html 视口中的中心滑块

Html 视口中的中心滑块

html css

Html 视口中的中心滑块,html,css,Html,Css,我有一个中心容器宽度为1000px（水平居中）的站点，它包含一个可延伸至2000px的滑块，以填充全屏-每个幻灯片包含一个2000px的图像，每个图像中的主文本设计为在以1000px为中心的站点中居中 我的问题是，无论屏幕大小如何，我都需要滑块集中显示，但它今天早上让我头疼 因此，从我下面的html中，我基本上需要#mysweep div能够扩展到2000px，但始终以中心显示包含的幻灯片-有人有什么建议吗 <body> <div class="content">

我有一个中心容器宽度为1000px（水平居中）的站点，它包含一个可延伸至2000px的滑块，以填充全屏-每个幻灯片包含一个2000px的图像，每个图像中的主文本设计为在以1000px为中心的站点中居中

我的问题是，无论屏幕大小如何，我都需要滑块集中显示，但它今天早上让我头疼

因此，从我下面的html中，我基本上需要#mysweep div能够扩展到2000px，但始终以中心显示包含的幻灯片-有人有什么建议吗

 <body>
    <div class="content">
       <div id="headBlock">
          <div class="navContent">
               <div class="logo"><a href="index.html"></a></div>
               <div class="marketingTxt"></div>
               <div class="clearFix"></div>

                <nav>
                <ul>
                    <li><a href="./" class="sel" title="The liquid homepage" id="homeHL">home</a></li>
                    <li><a href="about-us/" title="About liquid" id="aboutHL">about us</a></li>
                    <li><a href="what-we-do/" title="What liquid do" id="whatHL">what we do</a></li>
                    <li><a href="clients/" title="liquid's clients" id="clientsHL">clients</a></li>
                    <li><a href="news/" title="News and blog post" id="newsHL">news</a></li>
                    <li><a href="contact-us/" title="Contact liquid" id="contactHL">contact</a></li>
                </ul> 
        </nav>
     </div>
</div>
<div class="sliderContainer">
        <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
        <div class='swipe-wrap'>
        <div><img src="images/Bravissimo_Banner_ie.jpg" width="2000" height="390" alt="Bravissimo"> </div>
        <div><img src="images/Keggy_Banner_Ie.jpg" width="2000" height="390" alt="Keglevich">     </div>
       <div> <img src="images/Radley_Banner_ie.jpg" width="2000" height="390" alt="Radley"></div>
       <div> <img src="images/Tiger_Banner_ie.jpg" width="2000" height="390"> </div>
    </div>
 </div>
我认为通过纯css实现您想要的唯一方法是使用图像作为背景图像：

Html:

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    min-width: 1000px;
    overflow-x: hidden;
}
.sliderContainer {
    background: url("../images/lowbg.png") repeat scroll 0 0 transparent;
    border-bottom: 1px solid #898279;
    box-shadow: 1px 4px 9px -6px inset;
    height: 390px !important;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: -8px;
    z-index: 1;
}
#mySwipe {
    max-width: 2000px !important;
    margin: 0 -500px !important;
    min-width: 1000px;
}

<div id="wrapper">
    <div class="imageHolder" style="background-image:url(http://lorempixel.com/1000/1000/)"></div>
</div>

#wrapper {overflow:hidden; min-width:500px; max-width:1000px;} /*widths should change to match your needs*/
#wrapper .imageHolder {background-position:center center; width:100%; height:500px;} /*height should change to match your needs*/