Question

我无法将图像置于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;
}

如果有办法做到这一点

Answer 1

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

Answer 2

尝试使用text-align:center的CSS中的#post-area。

以下为your example fiddle，中心对齐img。

Answer 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

无法居中图像

3 个答案: