CODEWITHSUNDEEP
htmlcss
stack over
stack over

Reputation: 55

Image won't align to Center

I am using a CSS reset script causing the image to not center. Does anyone know how I can fix this?

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 Reset

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

Upvotes: 0

Views: 2403

Answers (4)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

Well..

use this css

.stretch {

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

Check this demo.http://jsfiddle.net/hzZXV/1/

Upvotes: 1

Hive7
Hive7

Reputation: 3685

You can't use position: fixed; with margin: 0 auto; so you have to use the way that you do for position: absolute; centering. Here is the way to do it:

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

Here is a fiddle:

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

Upvotes: 0

dowomenfart
dowomenfart

Reputation: 2803

Apply left 50% on class stretch:

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

Upvotes: 0

Dvir
Dvir

Reputation: 3339

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

Upvotes: 0

Related Questions