Centrer un div dans un div

Question

Je sais que ce devrait être une chose assez facile à faire, mais pour une raison quelconque, j'ai des problèmes et je ne sais pas pourquoi. J'ajoute un contrôleur sous la galerie que vous pouvez utiliser pour faire défiler les diapositives et doit être centré.

C'est ce que le code ressemble 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%; 
} 

Laissez-moi savoir si vous avez besoin d'informations plus.

Merci.

Answer 1

Vous devez vous débarrasser du flotteur: à gauche sur .gallery_controls. marge: 0 auto ne fonctionnera pas autrement.

Answer 2

Pour que margin:0 auto; fonctionne, vous devez spécifier une largeur sur ce div et omettre le flottant.

Si vous souhaitez également centrer verticalement votre div, vous avez besoin de position:absolute sur la div ou de display:table-cell sur la div parente avec vertical-align:middle.

Quelque chose comme ceci:

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 3

Essayez de supprimer le flotteur gauche de cette classe:

.gallery_controls{ 

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

}

Answer 4

Changez votre CSS à quelque chose comme ceci:

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

Résultat http://jsfiddle.net/AmAMP/1/

Answer 5

J'ai mis à jour voir votre CSS s'il vous plaît vérifier: -

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

ou vous pouvez voir l'exemple en direct pour faciliter la compréhension: - http://jsfiddle.net/cPk53/5/

Answer 6

Utilisation Tables à la place. Avec div l'apparence et la convivialité varient d'un navigateur à l'autre. Au moment où vous sentez que vous l'avez fait, le chargement dans un autre navigateur ou une ancienne version du navigateur cassera votre illusion.