0

I'm trying to center my image inside the div, but its seemingly glued to the right.

Here are my divs:

<div align="left" style="display:inline-block;">
    <div style="width:210px;">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>

This is what it looks like:

image in div

How can I fix this?

Zach Gates
  • 4,045
  • 1
  • 27
  • 51

4 Answers4

4

img tags are inline by default so all you have to do is call text-align: center on its parent:

<div style="display:inline-block;">
  <div style="width:210px;text-align: center;">
    <img src="res/img/TopAd.png" style="padding:10px 0;">
  </div>
</div>

A few other notes:

  1. You can remove align="left", that's not supported in HTML5.
  2. You can also remove top: -100px because the top, left, right, and bottom properties don't work unless an element is set to fixed, absolute or relative.
  3. This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.

UPDATE

if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:

<div style="width:210px;text-align: center; margin: auto;">
   <img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>

FIDDLE

jmore009
  • 12,863
  • 1
  • 19
  • 34
  • it's hard to tell what the issue actually is, because from this code there is nothing to center. If you just want to center all of this in the middle of the page then set `body{ text-align: center}` – jmore009 Jan 02 '15 at 04:04
  • @zachgates can you explain a little more what's supposed to happen? It appears that this isn't as clear as it seemed to be – jmore009 Jan 02 '15 at 04:06
  • @zachgates I'm glad you got it working. Out of curiosity, can you explain what you mean by `I adjusted the vertical line to the left`? – jmore009 Jan 02 '15 at 04:12
  • The vertical line was made using something similar to [this](http://stackoverflow.com/questions/571900/is-there-a-vr-vertical-rule-in-html). I adjusted the width of the line to 0px, and changed my image to match the above. @jmore009 – Zach Gates Jan 02 '15 at 04:19
0
<div align="left"

The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left".

padding:10 0 10 0;

10 of what? You are missing the units. You probably want 10px for pixels:

padding:10px 0 10px 0;

I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.

<div style="display:inline-block;">
    <div style="width:210px; text-align: center; border: 1px solid #ccc;">
        <img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
    </div>
</div>
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • @zachgates - I've added a code snippet that demonstrates an image centered within a div. Please edit your question, including enough code to reproduce the problem you are experiencing. A code snippet that reproduces your problem is ideal. – gilly3 Jan 02 '15 at 04:06
0
<div align="left" style="display:inline-block;">
    <div style="width:210px; vertical-align:middle; text-align:center">
        <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
    </div>
</div>
Vishnu Shanmughan
  • 101
  • 1
  • 10
0

The following code will do the task.

<div align="left" style="display:inline-block;">
    <div style="width:210px;" align="center">
    <img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>

MegaMind
  • 653
  • 6
  • 31