如何将图像与div的中心对齐？

Question

I am trying to align an image in a div to center. I have tried the following but its not working. Please tell me how to fix this . 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>

只需要div标签中的style="text-align:center" 。

Answer 2

Try with the following CSS code. It makes your <img> aligned center horizontally and aligned middle vertically.

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

Answer 3

Just use margin auto:

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

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

Answer 4

Try below code in CSS. it will work for sure align="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 .erabox div's width and height are fixed or at least it's height and width are always surely greater than image's you can use image as a background

HTML

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

CSS

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