Comment centrer l'élément à l'intérieur d'un div

Je veux centrer le contenu de .SideBarFirst div mais je ne sais pas comment y parvenir.Comment centrer l'élément à l'intérieur d'un div

Quelqu'un peut-il m'aider avec une solution qui ne repose pas sur l'ajout de padding ou de left/right valeurs à l'élément?

CSS:

body { 
    width: 960px; 
    margin: 0 auto; 
} 

.content { 
    width:500px; 
    float: left; 
} 

.SideBarFirst { 
    width:460px; 
    float: right; 
} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

HTML:

<body> 
    <div class="content">test</div> 
    <div class="SideBarFirst"> 
     <div>not working for center</div> 
    </div> 
</body>

Mon code actuel: http://jsfiddle.net/mmnaderi/yTCkx/

Source

2013-07-28 masoud soroush

enlèvement d'abord largeur et marge: 0 auto dans le corps – Hushme

Voici deux méthodes simples pour centrer un élément à l'intérieur d'un div, verticalement, horizontalement ou les deux (CSS pur): http://stackoverflow.com/a/31977476/3597276 –

Yup table d'affichage et flex n'est pas une solution sûre pour un site web réactif! Exemple: montrer une grande image dans la table d'affichage de cette échelle div et plus de 100%. –

il a été question de votre navigateur et est maintenant corrigé.

Source

2017-06-25 08:16:08

supprimer ceci:

body { 
    width: 960px; 
    margin: 0 auto; 
}

utiliser ceci:

HTML

<div class="content">test</div> 
<div class="SideBarFirst"> 
    <div>not working for center</div> 
</div>

CSS:

.content {width:500px; float : left;} 

.SideBarFirst {width:460px; float : right;} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

See This Fiddle

Source

2013-07-28 12:10:40

ce qui n'allait pas dans son css – Hushme

voir ma réponse encore –

j'ai vu ceci vous juste enlevé css du corps – Hushme

% peut

.SideBarFirst div { 
    width: 40px; 
    margin: 0 50%; 
}

Ou vous pouvez être plus brute et essayez ceci:

.SideBarFirst div { 
    width: 40px; 
    margin-left: 210px; 
}

mise en page élastique ne fonctionnera pas bien avec le ce second code

Ou ceci:

<div class="content">test</div> 
<div class="SideBarFirst"> 
    <div align="center">not working for center</div> 
</div>

Regardez cela aussi: How to horizontally center a <div> in another <div>?

Source

2013-07-28 12:19:04

Votre problème est que vous faites flotter l'élément vers la gauche pour qu'il apparaisse toujours à gauche. Si vous wan pour centrer changer votre code CSS à ceci:

.content {width:500px; float : left;} 

.SideBarFirst {width:460px; float : right;} 

.SideBarFirst div { 
    width: 40px; 
    margin: 0 auto; 
}

supprimer également ceci:

body { 
    width: 960px; 
    margin: 0 auto; 
}

Source

2013-07-28 12:26:27 Ollie

Comment centrer l'élément à l'intérieur d'un div

Répondre

Questions connexes