How to align the image to the center of the div?

Question

I am trying to align the image in a div to the center. I tried the following but did not work. Please tell me how to fix it. thanks in advance.

<div class="erabox"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div> 

Answer 1

 <div class="erabox" style="text-align:center"><img src="indicator2.gif" alt="1910 to 1919" width="229" height="38" /></div> 

you need style="text-align:center" in your div tag.

Answer 2

Try using the following CSS code. It aligns the center of the <img> horizontally and aligns vertically in the middle.

 .erabox{ width:200px; height:200px; display:table-cell; text-align:center; vertical-align:middle; } 

Answer 3

Just use the auto margin:

  .erabox img { display: block; margin: auto; } 

DEMO: http://jsbin.com/apiwox/edit#html,live

Answer 4

Try entering the code in CSS. it will work for sure alignment = "absmiddle"

Answer 5

CSS

 .erabox{ position:relative; } .erabox img{ position:absolute; top:50%; left:50%; margin-top:-19px; /* Half of images height */ margin-left:-115px; /* Half of images width */ } 

Answer 6

If the width and height of the div.erabox is fixed, or at least the height and width always exceed the image, you can use the image as a background

HTML

 <div class="erabox"></div> 

CSS

 .erabox{ background:url("indicator2.gif") no-repeat; background-position:50% 50%; }