ディスプレイの中央にimgを配置する：インラインブロック要素

Question

グローバルクラスを使用しています.total-centerを持っています。画像を中心にして、bonus-leftにアライメントしてみてください。私のイメージはbonus-left div要素の中に垂直方向にもセンタリングされていない理由IMGが外容器のbonus-leftの起こっているいくつかの理由...

について、誰が見ていますか？

.total-center { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    width: 100%; 
 
} 
 

 
#review-bonus { 
 
    width: 99%; 
 
    border: 1px solid #CDCDCD; 
 
    background: #F7F7F7; 
 
    margin: 30px auto; 
 
} 
 

 
#review-bonus-inner { 
 
    padding: 20px; 
 
} 
 

 
#bonus-left, 
 
#bonus-right { 
 
    display: inline-block; 
 
} 
 
#bonus-right { 
 
    width: 75%; 
 
} 
 

 
#bonus-left { 
 
    width: 25%; 
 
    position: relative; 
 
} 
 

 
#bonus-left img { 
 
    width: 60%; 
 
    height: auto; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="review-bonus"> 
 
    <div id="review-bonus-inner"> 
 
    <div id="bonus-left"> 
 
     <div class="total-center"><img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico"></div> 
 
    </div><div id="bonus-right"> 
 
     <h3 id="bonus-title">FREE</h3> 
 
     <p id="bonus-description">f jdkl fnjfn rweofnrfnfndafndffn ddfd fdhfanjk herowf fhrgfndfndf wfefnanf fefnf f hqaf hef fewh f hfewanf f aWFH F HWEEFNDNADS ANDJFDNF E </p> 
 
     <ul> 
 
     <li>g erj iroehgnvfd f nvjvhrnvjf nevj nvonvrfvnfvn envdvn nfereonovfnjofnvf oegnpvnfdonvfognoa</li> 
 
     <li>fndj iofgh rionrn ;nn oej rejbnvofn noe revofnoa;gvan</li> 
 
     <li>h trhth thwgh 4t ththhthtw th aregtrhw</li> 
 
     <li>htr htrh twh htrh thth twhtr hwht w</li> 
 
     <li>grtg regh htrw hthtthwhth tr th twhw hhttwhtrh w h</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは私の微調整を理解するためにCSSとHTMLについて知っておくべきことがいくつかあります：

• ブラウザは、実際には要素間の空白をレンダリングします。これは、コンテナの幅が100％で、子が幅：25％と幅：75％の場合、次の行に折り返されます。 HTML内の親と子の間の空白を削除すると、完全に収まります。
• この空白を削除できない場合は、floatと "clearfix"ハックを使用する必要があります。しかし、私は空白を制御できるので、私はその方法だけを実装します。
• コンテンツを完全に中央に配置するためにイメージの周りにラッパーは必要ありません。これは通常、CSSだけで行うことができます。私の微調整では、imgの幅を100％とし、高さや位置を気にしませんでした。両親にアラインメントが残されます。
• 縦向きの配置は難しいです。この場合、親のすべての兄弟に適用すると考える必要があります。私はボーナス - 左とボーナス - 右のどちらも、真ん中に垂直に整列するように指示しました。つまり、背の高い方が短い方の指導を提供します。 vertical-alignを与えるだけです：ボーナス左の真ん中はデフォルトのvertical-alignになります：ボーナス - 右のトップは、ボーナス - 左のミドルがボーナス - 右のトップと垂直に整列することを意味します。トリッキーなトリッキー。

#review-bonus { 
 
    width: 100%; 
 
    border: 1px solid #CDCDCD; 
 
    background: #F7F7F7; 
 
    margin: 30px auto; 
 
} 
 

 
#review-bonus-inner { 
 
    padding: 20px; 
 
} 
 

 
#bonus-left, 
 
#bonus-right { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#bonus-right { 
 
    width: 75%; 
 
} 
 

 
#bonus-left { 
 
    width: 25%; 
 
} 
 

 
#bonus-left img { 
 
    width: 100%; 
 
}

<div id="review-bonus"> 
 
    <div id="review-bonus-inner"><div id="bonus-left"> 
 
     <img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico"> 
 
    </div><div id="bonus-right"> 
 
     <h3 id="bonus-title">FREE</h3> 
 
     <p id="bonus-description">f jdkl fnjfn rweofnrfnfndafndffn ddfd fdhfanjk herowf fhrgfndfndf wfefnanf fefnf f hqaf hef fewh f hfewanf f aWFH F HWEEFNDNADS ANDJFDNF E </p> 
 
     <ul> 
 
     <li>g erj iroehgnvfd f nvjvhrnvjf nevj nvonvrfvnfvn envdvn nfereonovfnjofnvf oegnpvnfdonvfognoa</li> 
 
     <li>fndj iofgh rionrn ;nn oej rejbnvofn noe revofnoa;gvan</li> 
 
     <li>h trhth thwgh 4t ththhthtw th aregtrhw</li> 
 
     <li>htr htrh twh htrh thth twhtr hwht w</li> 
 
     <li>grtg regh htrw hthtthwhth tr th twhw hhttwhtrh w h</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ボーナス左とボーナス右側の垂直整列を追加すると、あなたは同様にあなたの画像上の最大幅を追加したい場合があります。この

#bonus-left, 
#bonus-right { 
    vertical-align: middle; 
    display: inline-block; 
} 

を修正します。ワイドスクリーンでは大きすぎてオーバーフローします。

Answer 3

は、垂直整列を追加します。＃ボーナスから右へトップは

#bonus-left { 
     width: 25%; 
     vertical-align: top; 
     position: relative; 
    } 

あなたの問題を解決します。この