div内のdivの中央揃え

Question

これはかなり簡単なことですが、なんらかの理由で問題が発生しており、その理由がわかりません。ギャラリーの下にコントローラーを追加して、スライドをスクロールして中央に置く必要があるコントローラーを追加します。

これは、コードはATM次のようになります。

<div class="control_wrap" style=""> 
    <div class="gallery_controls" style=""> 
     <a target="_blank"></a> <a target="_blank"></a> <a target="_blank"></a> 
    </div> 
</div> 

CSS：

.control_wrap{ 
    float:left; 
    width:100%; 
} 

.gallery_controls{ 
    margin:0 auto; 
    float:left; 
    width:50%; 
} 

あなたはもう情報が必要な場合は、私に教えてください。

ありがとうございました。

Answer 1

フロートを除去する必要があります：.gallery_controlsに残しておきます。 margin：0の場合、autoは動作しません。

Answer 2

margin:0 auto;を動作させるには、そのdivの幅を指定してfloatを省略する必要があります。

あなたにも縦にあなたのdivを中央にしたい場合は、vertical-align:middleで、親のdivにdivの上position:absolute、またはdisplay:table-cellのいずれかが必要です。このような

何か：このような何かにあなたのCSSを変更し

.gallery_controls{ 

margin:0 auto; 
/*float:left;*/ 
width:50%; 

}

Answer 3

てみてください、このクラスから左にフロートを削除する

を

.gallery_controls{ 
    margin:0 auto; 
    width:50%; 
    height:50px; 
    background:red; 
} 

か、理解を容易にするために実際の例を見ることができます： - - ：私は更新されているhttp://jsfiddle.net/AmAMP/1/

Answer 4

：

parent{ 
    position:relative; 
} 

child{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    width: <your-width>; 
    height: <your-height>; 
    margin-left: <your-width>/2; 
    margin-top: <your-height>/2; 
} 

Example fiddle

Answer 5

.control_wrap { 
    float:left; 
    width:100%; 
} 
.gallery_controls { 
    margin:0 auto; 
    float: left; 
    text-align:center; 
    width:50%; 
}​ 

結果は、あなたのCSSがそれを確認してください参照 http://jsfiddle.net/cPk53/5/

Answer 6

使用代わりにテーブル。 divでは、ルック・アンド・フィールはブラウザごとに異なります。あなたがそれをやったと感じる瞬間、別のブラウザまたは古いバージョンのブラウザで読み込むと、あなたの錯覚が損なわれます。