CODEWITHSUNDEEP
cssimagehtml
Claes Gustavsson
Claes Gustavsson

Reputation: 5669

How to center an image in a div?

I´m displaying an images 1000x1000px in a smaller div 320x460px with overflow:auto so you can scroll the image within the div. When I load the page then the image is displayed from the left-top corner off the image, and I wonder how I can display the image centered instead?

Any input appreciated, thanks.

Here is the code. In my index file I load the page like this:

$('#kartamap').load('imagemap.html', function() {
                    alert(".load has loaded");  
                    imagescroll();                                                                     

                           });

And this is my page.

<div id="themap">

 <div id="imagediven" style="height:460px; width:320px;">

  <img src="image.png" width="1000px" height="1000px"/>

  </div>

<style>
#imagediven {
    overflow:auto;
    height:460px;
    width:320px;
    position:relative;
}

</style>

    <script type="text/javascript">

    function imagescroll(){
    var element = document.getElementById('imagediven'), /* This is your div */
            scrollHeight = element.scrollHeight,
            scrollWidth = element.scrollWidth;
        clientHeight =$(window).height();
            clientWidth = $(window).width();

        alert(scrollHeight);//this is not displaying the image height?
        alert(clientHeight);//this is getting a value off the screen

    element.scrollTop = (scrollHeight - clientHeight) / 2;
    element.scrollLeft = (scrollWidth - clientWidth) / 2;
    }

    </script>

</div>

Upvotes: 0

Views: 1752

Answers (8)

Nikhil Patel
Nikhil Patel

Reputation: 1781

I think you are trying to scroll the div to the center of the img.

You need to use Javascript properties scrollTop and scrollLeft

For scrolling to the centre, you need to set the values as 

scrollTop = (scrollHeight - clientHeight) / 2;
scrollLeft = (scrollWidth - clientWidth) / 2;

JS :

var element = document.getElementById('container'); /* This is your div */

element.scrollTop = (element.scrollHeight - element.clientHeight) / 2;
element.scrollLeft = (element.scrollWidth - element.clientWidth) / 2;

Check this JSFiddle

Documentation : scrollTop | scrollLeft | scrollHeight | scrollWidth | clientHeight | clientWidth

Upvotes: 0

Andrew Collinson
Andrew Collinson

Reputation: 11

If you're going to be working with the same size image 100% of the time you could position it absolutely.

.className {
  height: 460px;
  position: relative;
  overflow: hidden;
  width: 320px;
}
.className img {
  left: 50%;
  margin: -500px 0 0 -500px;
  position: absolute;
  top: 50%;
}

I've worked this out on the image being 1000px x 1000px.

Also, I've put a jsFiddle together for you to view it in action.

http://jsfiddle.net/7x2JR/

Upvotes: 1

user1860859
user1860859

Reputation:

you can assign 320px width and 460px height to the container div. Then apply 25% margin to your image in css...it will align your image in center from all sides.

Here is the HTML

<div id="img">
 <img src="Chrysanthemum.jpg" />
</div>

Here is the CSS

div#img
{
width:320px;
height:460px;
overflow:scroll;

}
div#img img{margin:0 auto;padding:0;margin:25%;}

Upvotes: 1

Pinky
Pinky

Reputation: 701

Try this

    <div text-align:center">
    <img src="img.png">
    </div>

Upvotes: 0

peterp
peterp

Reputation: 3121

I think scrollTop is the property you are looking for, have a look at this SO question: Scroll Position of div with "overflow: auto"

(Actually, you do not want to center the image within the div, but scroll the div to the center.)

Upvotes: 0

SaturnsEye
SaturnsEye

Reputation: 6499

Why don't you try:

text-align:center;

Upvotes: 0

Sasidharan
Sasidharan

Reputation: 3740

div img
{
margin:auto;
width:320px;
height:460px;
vertical-align:middle;
}

Upvotes: 0

rachids
rachids

Reputation: 360

Check the background-position property.

You can also use background-size: cover (or contain) to make it fits your div.

Upvotes: 1

Related Questions