Question

我一直试图将我在标题中的滑块居中。标题和整个容器整齐地居中，只有边距：0自动;然后我尝试在标题中包含幻灯片，并尝试通过多种方式正确放置它。是的，我通过使用position：aboslute然后使用坐标来成功完成我自己的配置，但这对世界其他地方都不起作用。

该网站（正在建设中）是www.hrcprojectconsulting.com

既然你能够看到所有的CSS内容，你知道在天堂里如何定位吗？我尝试了所有保证金组合，但我认为我没有选择。

一个好消息是，Internet Explorer 10现在也可用于Windows 7，因此，CSS3内容和html5占位符可以工作，所以我再也不会为后退代码编写代码了。

注意：如果您碰巧看到一切正常，那是因为您拥有与我相同的监视器和分辨率。

谢谢

滑块的代码：

 <style type="text/css" media="screen">
#slider {
    width: 960px; /* important to be same as image width */
    height: 150px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
#sliderContent {
    width: 960px; /* important to be same as image width or wider */
    position: absolute;
    top: 125px;
    left:265px;

    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

我的主页代码：

<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }



body{

    background:url('../assets/uploads/miweb/gradient2.png');
    background-repeat:repeat-x;
    font: 13px/20px normal Helvetica, Arial, sans-serif;
    color: #4F5155;
    margin:0;
    padding:0;
    line-height: 1.5em;

}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
height: 300px; /*Height of top section*/
}

Answer 1

这是因为ul具有默认填充。您必须将ul#sliderContent的填充设置为0：

 #sliderContent {
    padding:0;
    margin:0;
 }

然后您应该从样式表中删除position: absolute。

要将sliderContent置于底部，您可以这样做：

 #topsection {
    position: relative;
 }
 #slider {
    position: absolute;
    bottom: 0;
 }
 #sliderContent {
    padding: 0;
    margin: 0;
 }

CSS将我的幻灯片放在标题中

1 个答案: