CODEWITHSUNDEEP
jqueryhtmlcss
Dancer
Dancer

Reputation: 17651

CSS Centre Image within Div

I need to build a site with large high res images all 1600 px wide which I need to centre on the screen regardless of browser screen dimensions.

The images are designed so that they will look good centred down to 1024 px, but need to always display fixed from centre rather that top and left.

Does anyone have a solution - ideally which will suit both inline and background versions of the images!?

CSS3 solutions fine as i'm targeting ie8 plus.

Upvotes: 0

Views: 320

Answers (4)

raj_n
raj_n

Reputation: 186

Two ways:

  • Using Background Image

    This is simple, the CSS code is as follows

    div.image-wrapper {
    background: url('imgs/example.png') no-repeat center;
}

  • Using IMG tag

    Here's the HTML:

    <div id="img-area">
    <img src="imgs/example.png"/>
</div>

    CSS:

    #img-area img {
    display:block; //this will let us use margin auto
    margin:auto;
    top: (n)px;  //you can obtain 'n' by using JavaScript
}

    Or you could use the method outlined in http://css-tricks.com/centering-in-the-unknown/ ; this will save you from using javascript.

    Upvotes: 0

    • Nw167
    Nw167

    Reputation: 169

    Do you mean that the image will remain the same size, but is designed to look good even if you are only viewing a central section of it? If so...

    <img href="..." class="centered" />

.centered {
    position:fixed; top:50%; left:50%;
    width:1600px; height:800px;
    margin: -400px 0px 0px -800px;
    }

    This will center an image that is 1600x800px. Just alter the top margin to be minus half the image height.

    It's not necessary to declare the dimensions, just added to illustrate.

    Upvotes: 0

    Jordan Denison
    Jordan Denison

    Reputation: 2727

    What has worked for me is putting an image inside a div with id background right after the body and then using this CSS:

    #background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    Upvotes: 0

    keaukraine
    keaukraine

    Reputation: 5364

    Because you haven't provided any definite HTML markup, only a generic description of your problem, I provide you a link to http://css-tricks.com/centering-in-the-unknown/ Here you can find various CSS techniques to center content both vertically and horizontally.

    jQuery is not necessary to center content, I believe you will manage it with proper HTML markup coupled with some CSS.

    Fiddle ( http://jsfiddle.net ) will be helpful, though.

    Upvotes: 5

    Related Questions