1

Just trying to centre an image which i have placed using HTML. Simply trying to use Margin:auto but it it isn't working?

Here is the code:

#indexheader {
    margin: 0 auto;
    margin-top:5%;
    width:190%;
    height: 190%;
}
0x9BD0
  • 1,542
  • 18
  • 41
bec
  • 45
  • 2
  • 7

5 Answers5

2

If you're explicitly setting the width at 190%, you don't necessarily need margin: auto. You could just set the left margin to -45%.

Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20
2

If your element is an inline-block I believe it won't centre with "margin: 0 auto;" you can try adding:

display: block;

and see if that works.

Ssawa
  • 131
  • 1
  • 2
  • 7
1

Assuming you want to center horizontally, you just need to set a width on the parent element and set display:block on the image itself. Here's a simple example:

JSFiddle

I'm not sure what it means to center when the width is greater than 100% of the parent though. Something to think about.

aw04
  • 10,857
  • 10
  • 56
  • 89
0

is your #indexheader inside another div element? if so that would cause it only to center within the element.

do you have any css coding done on the element that would cause it not to center? such as a position: fixed;?

also if you image is placed within your "indexheader" it may not be centering because you are centering the box but not the image. try applying an id to the image element in your html coding and center that.

this is a rather vague question as what you posted should center but without seeing any of your other code there are many other elements that could be affecting it.

you could always try an inline statement such as align="center" in your html and give that a go

Eolis
  • 645
  • 2
  • 9
  • 22
0

here is the fiddle http://jsfiddle.net/XF4JM/

that should center images. the key is to make the image a block and applying margin-left and margin-right to auto. hope this helps

img {
display:block;
margin-left:auto;
margin-right:auto;    
}
Sai
  • 1,889
  • 5
  • 18
  • 26