如何将我的网站中的幻灯片放在屏幕*？

I have this css style code:

我有这个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;
}

I changed the part in the body:

我改变了身体的一部分:

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;
}

Unmarked 3 lines and added the width and margin 0 auto If i was using this 3 lines without the width and margin then the slideshow was displaying in the left bottom.

未标记3行并添加宽度和边距0自动如果我使用这3行没有宽度和边距,则幻灯片显示在左下角。

Now the slideshow is displaying in the middle top. But i want it to be in the screen center not middle top:

现在幻灯片显示在中间顶部。但我希望它在屏幕中心而不是中间顶部:

Middle Top

What should i change/add ?

我应该更改/添加什么?

3 个解决方案

#1

Try this:

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

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

#2

I am going to assume your middle part is 300px width and 300px height.

我假设你的中间部分是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 */
    }

#3

You can use div tags for styling.. Below I have used the attribute style and set the margin from top... For example,

您可以使用div标签进行样式设置。下面我使用了属性样式并从顶部设置边距...例如,

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

#1