CSS img align：DIVの中右右揃えを設定する方法

Question

DIVのimgを真ん中に右寄せする方法を探しています：

私は垂直整列を使用してみました：ところで、あなたは「スタイルを使用している

<div style='height: 300px; width: 300px'> 
    <img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/> 
</div> 

Answer 1

<DIV style='height: 300px; width: 300px;border:1px solid #ff0000;display:table-cell;vertical-align: middle'> 
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='float:right;'/> 
</DIV> 

...右のIMGのスタイルではなく、一緒に動作しないようです：中・フロート= "あなたのイメージタグで。これは無効です。

Answer 2

これを実行する方法は多数あります。画像とその容器の高さが分かっていれば非常に簡単ですが、そうでなければトリッキーです。

方法1：行の高さ、テキスト整列および垂直整列

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    line-height: 300px; 
 
    text-align: right; 
 
} 
 
#div1 img { 
 
    vertical-align: middle; 
 
}

<div id="div1"> 
 
    <img src="http://dummyimage.com/100x50/fc0/000000.png">&#8203; 
 
</div>

方法2：絶対/相対位置、像高ニーズに合うソリューションを選択知られている

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 
#div1 img { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    margin-top: -25px; /* -(image_height/2) */ 
 
}

<div id="div1"> 
 
    <img src="http://dummyimage.com/100x50/fc0/000000.png"> 
 
</div>

方法3：

#div1 { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
} 
 
#div1 img { 
 
    float: right; 
 
    position: relative; 
 
    top: 125px; /* (div_height-image_height)/2 */ 
 
}

<div id="div1"> 
 
    <img src="http://dummyimage.com/100x50/fc0/000000.png"> 
 
</div>

jsFiddle

Answer 3

を既知の絶対/相対位置、画像及び容器の高さがある場合display: table-cellトリックがうまく機能j div内に浮いている画像がありますか？しかし、他の要素（例えば、<p>）が画像に詰まっていると、ブラウザによってサイズが変更されたときに、画像を垂直方向にプッシュする傾向があります。

http://www.brunildo.org/test/img_center.htmlには、クロスブラウザのサポートと以前のブラウザのバージョンハッキングに関するいくつかの良い情報があり、IEの破損したボックスモデルで正しく表示されるようになっています。