我怎样才能在我的网站幻灯片放映中心位于屏幕中心？

我有这样的CSS样式代码：我怎样才能在我的网站幻灯片放映中心位于屏幕中心？

/* null margins and padding to give good cross-browser baseline */ 
html,body,address,blockquote,div, 
form,fieldset,caption, 
h1,h2,h3,h4,h5,h6, 
hr,ul,li,ol,ul,dd,dt,dl, 
table,tr,td,th,p,img { 
    margin:0; 
    padding:0; 
} 

img,fieldset { 
    border:none; 
} 

hr { 
    display:none; 
    /* 
     HR in my code are for semantic breaks in topic/section, NOT 
     style/presenation, so hide them from screen.css users 
    */ 
} 

@media (max-width:600px) { 
    * { 
     -webkit-text-size-adjust:none; 
     -moz-text-size-adjust:none; 
     -ms-text-size-adjust:none; 
    } 
} 

body { 
     font:normal 85%/150% "segoe ui",helvetica,sans-serif; 
     background-image: url("CB1.html"); 
     //position:fixed; //(relative, absolute, static*) 
     //top: 120px; 
     //left: 120px; 
     //bottom: 120px; 
     width: 960px; margin: 0 auto; 
} 

.ss_scripted img { 
    display:none; 
} 

.ss_scripted .ss_show { 
    display: block;    
} 

#slideShow img { 
    margin:0 auto; 
} 

#slideCounter { 
    text-align:center; 
    padding:0.25em 1em; 
    font:bold 200%/120% consolas,courier,monospace; 
    color:#C00; 
} 

#slideControls { 
    width:512px; 
    padding:0.5em 0; 
    margin:0 auto; 
} 

#slideControls a { 
    float:left; 
    padding:0.25em 0.6em; 
    text-decoration:none; 
    color:#000; 
    background:#EEE; 
    border:2px solid #666; 
    -webkit-border-radius:1em; 
    -moz-border-radius:1em; 
    border-radius:1em; 
    -webkit-box-shadow: 
     inset 0 -0.5em 1em rgba(0,0,0,0.3), 
     0 0 1px #000; 
    -moz-box-shadow: 
     inset 0 -0.5em 1em rgba(0,0,0,0.3), 
     0 0 1px #000; 
    box-shadow: 
     inset 0 -0.5em 1em rgba(0,0,0,0.3), 
     0 0 1px #000; 
} 

#slideControls a:active, 
#slideControls a:focus, 
#slideControls a:hover { 
    background:#FFF; 
} 

#slideControls .next { 
    float:right; 
}

我在体内改变的部分：

body { 
     font:normal 85%/150% "segoe ui",helvetica,sans-serif; 
     background-image: url("CB1.html"); 
     //position:fixed; //(relative, absolute, static*) 
     //top: 120px; 
     //left: 120px; 
     //bottom: 120px; 
     width: 960px; margin: 0 auto; 
}

无标记3行并添加宽度和余量0汽车如果我使用此3行没有宽度和边距，幻灯片显示在左下角。

现在幻灯片显示在中间的顶部。但我想它是在屏幕中心不是中间的顶部：

Middle Top

我应该改变/添加什么？

来源

2014-11-21 Daniel Bogdan

你必须从顶部给予保证金。 – 2014-11-21 06:53:08

试试这个：

<div id="slides"> 
    <--! slider here --> 
</div> 

#slides{ 
    margin-right: auto; 
    margin-left: auto; 
    display: block 
}

来源

2014-11-21 07:09:42 PlugaruT

我打算假设你的中间部分是300px宽度和300px高度。

body { 
    font:normal 85%/150% "segoe ui",helvetica,sans-serif; 
    background-image: url("CB1.html"); 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    margin-top:-150px; /* 50% of the exact height */ 
    margin-left:-150px; /* 50% of the exact width */ 
    }

来源

2014-11-21 06:53:08

可以使用div标签样式.. 下面我使用属性风格和设置从顶部边缘... 例如，

<div style="margin-top:200px">Your slideshow content </div>

来源

2014-11-21 07:00:04 Pedi

我怎样才能在我的网站幻灯片放映中心位于屏幕中心？

回答

相关问题