How to get a website's position setup in a way that an image is centred?


Tags: javascript,html,css,css-position,positioning

Problem :

That title may not be the best, here's an example of what I'm looking for: http://www.teslamotors.com/en_CA/models

Notice how the image stays in the middle, and gets "shrunk" or reduced from both sides evenly, up to a certain width, and then the website stops shrinking.

I've tried my best, but can only achieve this in javascript using the window.onresize event call, and was wondering if there was a CSS way to do this.



Solution :

You will need to apply a percentage width, along with a fixed min-width, and margin: 0 auto to keep it centered

.content {
    width: 70%;
    min-width: 400px;
    margin: 0 auto;
}

http://jsbin.com/isohAQe/1


    CSS Howto..

    How to detect if browser support specified css pseudo-class?

    How to fix my nav bar? Positioning is different on different screens

    How to draw a dotted line with css?

    How to stop an image shrinking on responsive site whilst also keeping it centred

    How to make an image follows scrolling until a certain point

    How to create shape image border with clickable container?(use HTML and CSS)

    How do I install SASS with Mean.io?

    how to hide html video controls in micorostf edge (fullscreen mode)

    How to align multiple images in a table cell vertically?

    How do you style an android app?

    How to define variable with CSS value from HTML tag? [closed]

    how to make background 100% on a top menu

    Show jquery datepicker with HTML/CSS image

    How to customized select element through css?

    How should I do this in CSS?

    How to Find and replace class with javascript (No JQ)

    How to represent dual-cell format in CSS?

    How to override CSS style for a specific element if its parent has a specific class

    How can I give an image a black opaque overlay?

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How to keep your current screen position while dynamically showing surrounding elements with jquery / css

    How to reduce font size on a defined css style?

    How to re-render a page from a Google Chrome extension?

    How do I add extra slides to this pure CSS text rotator?

    How to apply background color with css to text with line break [duplicate]

    how to do display none using css

    CSS: How to address specific tags

    Unsure of how to wrangle my javascript dependencies

    How to make div horizontally and vertically centered without scripting?

    How to cover piece of border with element over it?