0

Googleの上位の結果のトリックをすべて読みましたが、画像をdiv内の中央に配置できません。

たとえば、この人気のあるトリック：http ://webdesign.about.com/od/beginningcss/a/aa012207.htmまたはhttp://www.w3.org/Style/Examples/007/center.en.html は機能しませんIE 8
で。Stackoverflowから別のものを試しましたが、Operaでは機能しません。

したがって、ほとんどのブラウザ（IE8、Firefox、Safari、Opera、Maxthon、K-Melon、SeaMonkey）で1つのトリックが機能していると思います。

<p style="text-align:center"><img  style="display: block;   margin-left: auto;   margin-right: auto;"   src="parliament.gif" width="200" height="71"></p>

コメントはありますか？

4

3 に答える 3

0

ちょっと今、あなたはこのようにテーブルセルのプロパティを表示することができます

ライブデモ http://jsfiddle.net/22cHK/

HTML

<div class="center">
<img src="http://testing.gobanana.co.uk/wp-content/uploads/2011/03/CrashTestDummy-2-8544b.jpg" >
</div>

CSS

.center{
text-align:center;
    border:solid 10px red;
    vertical-align: middle;
    display:table-cell;
    width:700px;
    height:700px;
}
.center img{

}

ライブデモhttp://jsfiddle.net/22cHK/

于 2012-06-22T11:13:47.903 に答える
0

こうすればうまくいく、

 <p style="text-align:center">
  <img  style="position:absolute;
  width:200px;
  height:70px;
  top:50%;
  left:50%;
  margin:-35px 0 0 -100px;
  visibility:visible;
  src="parliament.gif">
 </p>

ここで何が起こるかというと、top:50%, left:50% を使用して画像の左上隅が p の中央に配置されますが、負のマージンを使用すると画像がオフセットされて中央になります。このトリックは、すべてのブラウザーで機能します。

于 2012-06-22T13:08:49.503 に答える
0

何を中央に配置するかによって異なります: 明示的な幅を持つブロック要素、またはインライン要素:

http://jsfiddle.net/VNuFH/

ブロック画像を中央に配置:

<div>
    <img style="display: block; margin: 0 auto;" src="...">
</div>

インライン画像を中央に配置します:

<div style="text-align: center;">
    <img src="...">
</div>
​

シュリンク ラップされた div (たとえば、キャプション付きの画像) を中央に配置する場合は、1 つの要素で center float トリックを使用できます。

http://pmob.co.uk/pob/centred-float.htm

于 2012-06-22T10:51:59.317 に答える