如何将图片对齐到div的中心？

Question

我想把一个图片在div中居中对齐。我尝试了以下方法，但没有成功。请告诉我如何解决。谢谢。

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

- Vinoth Kumar

---

erabox类的代码是什么？ - Ariful Islam

你的 erabox 类的代码在哪里？ - jogesh_pi

Answer 1

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

你只需要在你的

标签中添加style="text-align:center"即可。

- Mohammad Saberi

---

仅使用text-align:center是不起作用的。您还应该从左侧或右侧给出margin或padding，然后您将获得居中的图像。 - Pradip R.

@Pro.. 为什么我们需要使用 margin 或 padding？我认为 text-align:center 对于水平居中 <img> 来说是完美的。 - Ariful Islam

@VinothKumar 亲爱的 Vinoth，如果您想获得100％完美的解决方案，您必须放置您的 erabox 类代码。 - Ariful Islam

是的，它现在居中了...但它应该居中于中间...左侧、右侧现在都可以...同样的事情也需要在顶部和底部。 - Vinoth Kumar

@Vinoth，通过您的CSS，图像只会从水平方向居中。不是从垂直方向。因此，如果该div带有边框，则图像看起来不在div的中间。 - Pradip R.

Answer 2

尝试使用以下CSS代码。它可以使你的<img>水平居中对齐并垂直居中对齐。

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

- Ariful Islam

Answer 3

只需使用 margin auto：

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

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

- Burntime

Answer 4

在CSS中尝试下面的代码，它一定会起作用 align="absmiddle"

- Pradip R.

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

- Babur Ussenakunov

---

请尝试以下代码：<div class="erabox" style='width:200px;height:200px;border:1px solid blue;align:absmiddle'> <img src="indicator2.gif" style='width:100px;border:1px solid red;align:absmiddle;align:absmiddle' alt="1910 to 1919" width="229" height="38" /></div> <style> .erabox{ text-align:center; } </style> - Vinoth Kumar

绝对定位将使图像从文档内容的流中移除。对于像这样简单的水平居中任务来说，这可能有些过度。 - Abhranil Das

我假设父 div 的高度和宽度是已知的，因为图像不仅在水平方向上对齐，而且在垂直方向上也对齐。我的解决方案是 'display: table-cell' 的替代方法，因为它在 ie7 中无法工作。 - Babur Ussenakunov

Answer 6

如果.erabox div的宽度和高度是固定的，或者至少它的高度和宽度总是比图像大，那么您可以将图像用作背景。

HTML

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

CSS

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

- Babur Ussenakunov