How to center an image in a div?

Question

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>

Does the `div` contain anything else other then the image which you wish to center? — Matt, Sep 26 '13 at 09:12
where is your code? post it here please.. right now every user here is guessing because you haven't provided the relevant code. — Mr_Green, Sep 26 '13 at 09:23

score 1 · Answer 1 · answered Sep 26 '13 at 09:39

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

score 1 · Answer 2 · answered Sep 26 '13 at 09:43

1

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/

answered Sep 26 '13 at 09:43

Andrew Collinson

11
1

Thanks Andrew, it work good, but I will have different sizes of the images, so it´s not exactly what I need. – Claes Gustavsson Sep 26 '13 at 10:28

score 0 · Answer 3 · answered Sep 26 '13 at 09:08

0

Check the background-position property.

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

answered Sep 26 '13 at 09:08

rachids

350
1
3
11

Hi Rachid, I can´t use background, it has to be img. – Claes Gustavsson Sep 26 '13 at 09:09
Oh okay. How about a text-align center on the div that contains the image ? – rachids Sep 26 '13 at 09:14

score 0 · Answer 4 · answered Sep 26 '13 at 09:12

0

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

answered Sep 26 '13 at 09:12

Sasidharan

3,676
3
19
37

1

Thanks, but centering a bigger image in a smaller div is not the same as centering a small image in a bigger div, it doesn´t work the same way. – Claes Gustavsson Sep 26 '13 at 09:18
now i got ur point..give padding:50px;overflow:hidden;..... It will give a space of 50 px from all the sides and scroll bar when overflow.. – Sasidharan Sep 26 '13 at 09:19

score 0 · Answer 5 · answered Sep 26 '13 at 09:13

0

Why don't you try:

text-align:center;

answered Sep 26 '13 at 09:13

SaturnsEye

6,297
10
46
62

Thanks, but centering a bigger image in a smaller div is not the same as centering a small image in a bigger div, it doesn´t work the same way. – Claes Gustavsson Sep 26 '13 at 09:18

score 0 · Answer 6 · edited May 23 '17 at 12:11

0

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.)

edited May 23 '17 at 12:11

Community

1
1

answered Sep 26 '13 at 09:15

peterp

3,101
3
22
37

score 0 · Answer 7 · answered Sep 26 '13 at 09:18

0

Try this

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

answered Sep 26 '13 at 09:18

Pinky

683
1
9
20

It's very obvious; try an HTML validator? – user229044 Oct 11 '13 at 13:45

Nikhil Patel · Accepted Answer · 2013-09-26T11:08:49.180

0

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

edited Sep 26 '13 at 11:08

answered Sep 26 '13 at 09:39

Nikhil Patel

1,761
12
23

Hi Nikhil and thanks a lot, it works perfect in fiddle but I can´t getting it to work in my web app? In my index file I load the map page with jquery.load but it is not scrolling the image?! – Claes Gustavsson Sep 26 '13 at 10:26
Check whether the scroll event is happening after the load, or before it. I'll suggest scrolling as a callback event after the load. – Nikhil Patel Sep 26 '13 at 10:31
I´m testing different things, but even if I .load the page and in that page have a function that runs after the page is loaded and I set the scrollHeight to a fixed number, the element.scrollTop show up with 0 in an alert? – Claes Gustavsson Sep 26 '13 at 10:57
If you get the `scrollTop` value, i.e `alert(element.scrollTop)`, it'll display the current scroll value, which'll be `0` since the `div` is not scrolled. You don't have to set the `scrollHeight`, it's automatically calculated. Set the value of `scrollTop` instead. – Nikhil Patel Sep 26 '13 at 11:04
I don´t know where I go wrong, but element.scrollHeight and width is not getting any value. So to test I thought that I would set some static numbers to test with. – Claes Gustavsson Sep 26 '13 at 11:24
@ClaesGustavsson - Your code is working on my end. Its alerting the values. What error are you getting ? – Nikhil Patel Sep 26 '13 at 12:33
Ok, I´m not sure what was wrong, now if I load only that page it works right, but not when I load it in the app? Do you have time to look at my app? I can send you the link in an email, mine is info@manmade.se, I don´t want to put the link here. Thanks. – Claes Gustavsson Sep 26 '13 at 12:39
Ok. Send at niks999[@]gmail.com. And I think this question is answered? – Nikhil Patel Sep 26 '13 at 12:42

How to center an image in a div?

8 Answers8