如何將圖像與div的中心對齊？

Question

我試圖將div中的圖像對齊到中心。 我試過以下但是沒有用。 請告訴我如何解決這個問題。 提前致謝。

<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

嘗試使用以下CSS代碼。 它使您的<img>水平對齊中心並垂直對齊。

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

Answer 3

只需使用保證金自動：

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

演示： http ： //jsbin.com/apiwox/edit#html,live

Answer 4

在CSS中嘗試下面的代碼。 它肯定會對齊=“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

如果.erabox div的寬度和高度是固定的，或者至少它的高度和寬度總是肯定大於圖像，你可以使用圖像作為背景

HTML

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

CSS

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