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のCSSで試してみてください#post-area

これは、中央揃えのフィドルの例imgです。

于 2012-07-23T02:25:33.677 に答える