0

我正在使用 CSS 重置脚本导致图像不居中。有谁知道我该如何解决这个问题？

HTML

    <head>
        <link rel="stylesheet" type="text/css" href="css/css_reset.css" />
        <link rel="stylesheet" type="text/css" href="css/mystyles.css" />
    </head>

    <body>
        <img src="images/final2.gif" class="stretch" alt="" />
        <p>This is the first paragraph in the body of your new HTML file!</p>
            asdfas
    </body>

CSS

body {
    /*width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; */
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */

    background-color:black;
}

.stretch {
    /*width:100%;
    height:100%;*/
    z-index:-1;
    position:fixed;
    margin-left:auto;
    margin-right:auto;
}

CSS 重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
4

4 回答 4

1

出色地..

使用这个 CSS

.stretch {

    z-index:-1;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

检查这个演示。http://jsfiddle.net/hzZXV/1/

于 2013-10-11T15:59:54.383 回答
0

Wrap the image with div and set his width to the image width and center it with margin: 0 auto;

for example:

<div id="wrapper">
      <img src="http://www.w3schools.com/images/icon_book.gif" class="stretch" alt="" />
</div>

Css

#wrapper {
   width:  image-width;
   margin: 0 auto;
}

jsFiddle

于 2013-10-11T15:46:21.047 回答
0

在类拉伸上应用左 50%：

.stretch{
/*width:100%;
height:100%;*/
z-index:-1;
position:fixed;
left: 50%;
top: 0;
margin-left:auto;
margin-right:auto;
}
于 2013-10-11T15:46:56.133 回答
0

你不能使用position: fixed;withmargin: 0 auto;所以你必须使用你做position: absolute;居中的方式。这是执行此操作的方法：

.stretch {
    position: fixed;
    left: 50%;
    margin-left: - img-width/2;
}

这是一个小提琴：

http://jsfiddle.net/Hive7/FAFTW/

于 2013-10-11T15:53:02.303 回答