2

我无法将图像居中在div. 给定以下标记，如何使图像居中？

html代码如下：

<div id='post-area' style='background:#000; padding:20px 0;'>
  <a class='fancybox' rel='group' href='example-big.png'>
    <img src='example.png'  />
  </a>
</div>

css代码如下：

#post-area {
  font-size:13px;
  color:#000;
  text-align:left;
  width:450px;
  height:auto;
  font-family:Meera
  clear:both;
  margin-top:20px;
  letter-spacing:normal;
}

#post-area img {
  max-width:250px;
  height:auto;
  float:none;
  margin:0 auto;
}

如果有任何方法可以做到这一点

4

3 回答 3

8

如果您只想将图像水平居中，您可以将 text-align:left 更改为 text-align: center。

于 2012-07-23T02:22:53.173 回答
3

HTML

<div id='post-area' style='background:#000; padding:20px 0;'>
  <a class='fancybox' rel='group' href='example-big.png'>
    <img src='http://blog.spoongraphics.co.uk/wp-content/uploads/2011/colourful-logo/18.jpg'  />
  </a>
</div>

CSS

#post-area {
  font-size:13px;
  color:#000;
  text-align:center;
  width:450px;
  height:auto;

  font-family:Meera;
  clear:both;
  margin-top:20px;
  letter-spacing:normal;
}

#post-area img {
  max-width:250px;
  height:auto;
  float:none;
  margin:0 auto;

}

看演示：- http://tinkerbin.com/gWYGnA6m

于 2012-07-23T05:44:24.657 回答
2

尝试text-align:center在#post-area.

这是您使用 center aligned的示例img。

于 2012-07-23T02:25:33.677 回答