DIVでの中心画像

Question

SOには数多くのディスカッションがありますが、私は成功していない提案を試みました。私は高さと幅が不明な画像が水平方向と垂直方向の中心に必要なDIVを持っています。

また、これは複数回必要なので、毎回CSSコードを追加する必要はありません。

ここで私はDIVのCSSとHTMLに関して何を持っています。

.gallery_image_container { 
    position: relative; 
    width: 830px; 
    height: 500px; 
    z-index: 7; 
    border: solid 4px #EAEAEA; 
    background-image:url(bottom_back.png); 
} 

と

<div class="gallery_image_container"> 
<img src="image.png" /> 
</div> 

Answer 1

信用を与えるために、私はこの非常に有用な記事をレビュー：http://phrogz.net/css/vertical-align/index.html

あなたは.gallery_image_containerに3つの以上のCSSルールを追加する必要があります。

text-align: center; 
display: table-cell; 
vertical-align: middle; 

最初の行はかなり明白です。それはあなたを水平にセンタリングします。 2行目はdivをセルのような表形式で動作させ、3行目は垂直方向のアライメントを行います。私は実証するためにjsfiddleを投稿したいと思いますが、今日はいくつかのメンテナンス作業をしています。私はテストにそれをやった、それはあなたがdivタグの中に画像を含めることができますし、それが中央集権とのdivの内側にimgタグを追加して作る必要はありませんすることができます直接CSSを使用し、現在のChromeとFFとIE 8で

Answer 2

を働きましたCSSを使用してメインdivが画像を制御できることを観察できます。

<div class="right-panel"></div> 

.right-panel{ 
height: 25%;  
width: 50px;  
background: url(/assets/image-png/rightPanel_3.png); 
background-repeat: no-repeat; 
background-position: 0px; 
background-size: 48px 64px; 
}