Content Not Centering Correctly

Question

So there's this image in my code and with following code it is centered correctly horizontally,

img#headerImage{
            width: 600px;
            margin-left:auto !important;
            margin-right:auto !important;
        }

but when I add margin-left:-300px; the image is resized appropriately but it is slightly offset to the left and no longer exactly centered.

Any ideas?

Also, here's some of the HTML:

<tr>
  <td class="headerContent" id="logoContainer">
    <img src="url" style="max-width:600px;"
         id="headerImage" mc:label="header_image" mc:edit="header_image"
         mc:allowdesigner="" mc:allowtext="" />
  </td>
</tr>

Oh boy, `!important`, selector specificity and `` walk into a bar… (a heads up: `` is an inline tag, using `margin` won't help you if you don't change the `display` property or use `text-align: center;` instead). — nietonfir, Oct 31 '13 at 23:44
text-align: center; was the answer! I hadn't noticed that the parent container was had text-align: left; set! — Drew, Nov 01 '13 at 01:54

score 0 · Answer 1 · answered Nov 01 '13 at 00:34

0

You could better still use margin:0px auto;

answered Nov 01 '13 at 00:34

Precious Okwu

397
5
12

This doesn't fix it, `img` are inline by default. He could remove the margin's altogether and just use text-align: center, or he can add `display: block` to make the img a block-level element. – Marco Pietro Cirillo Nov 01 '13 at 01:12

score 0 · Answer 2 · answered Nov 01 '13 at 01:10

0

add display: block to your img css

answered Nov 01 '13 at 01:10

Marco Pietro Cirillo

864
2
8
26

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

When you say margin-left:-300px you are saying you want the picture moved 300px to the left. With a right margin set to auto it will of course be offset left. If you want to make it center and then move it over just slightly then I recommend reading up on this answer here: Offset div from center

Also you will want to add

display:block;

edited May 23 '17 at 11:57

Community

1
1

answered Nov 01 '13 at 01:19

Nick Chapman

4,402
1
27
41

Content Not Centering Correctly

3 Answers3