如何将图像对齐到div的中心?

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中的图像对齐到中心。我试过以下方法，但没有效果。请告诉我怎么修理。提前谢谢。

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

6 个解决方案

#1

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

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

你只需要样式="text-align:center"在你的div标签中。

#2

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

试试下面的CSS代码。它使你的如何将图像对齐到div的中心? 水平对齐中心，垂直对齐中间。

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

#3

Just use margin auto:

只使用保证金汽车:

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

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

演示:http://jsbin.com/apiwox/edit html,生活

#4

Try below code in CSS. it will work for sure align="absmiddle"

在CSS中尝试下面的代码。它肯定有效align="absmiddle"

#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 */
}

#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

如果。erabox div的宽度和高度是固定的，或者至少它的高度和宽度总是大于图像的，你可以使用图像作为背景

HTML

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

CSS

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

#1

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