CSS: élément central dans un élément

Définissez text-align:center; au div parent, et margin:auto; à l’enfant div.

 #parent { text-align:center; background-color:blue; height:400px; width:600px; } .block { height:100px; width:200px; text-align:left; } .center { margin:auto; background-color:green; } .left { margin:auto auto auto 0; background-color:red; } .right { margin:auto 0 auto auto; background-color:yellow; } 

 
 
 a block to align center and with text aligned left 
 
 a block to align left and with text aligned left 
 
 a block to align right and with text aligned left 
  

En fait, c’est très simple avec les boîtes flexibles CSS3.

 .flex-container{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; align-items: center; width: 400px; height: 200px; background-color: #3498db; } .inner-element{ width: 100px; height: 100px; background-color: #f1c40f; } 

CSS

  body{ text-align:center; } .divWrapper{ width:960px //Change it the to width of the parent you want margin: 0 auto; text-align:left; } 

HTML

 
Tada!! 

Cela devrait centrer la div

2016 – Méthode HTML5 + CSS3

CSS

 div#relative{ position:relative; } div#thisDiv{ position:absolute; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

HTML

 
 
Bla bla bla
  

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

text-align:center; sur le parent div Devrait faire le tour

il suffit de donner la position: relative parent div position: relative

Le div est-il une largeur fixe ou une largeur de fluide? De toute façon, pour la largeur du fluide, vous pouvez utiliser:

 #element { /* this is the child div */ margin-left:auto; margin-right:auto; /* Add remaining styling here */ } 

Ou vous pouvez définir le div parent pour text-align:center; et le div enfant à text-align:left; .

Et à left:50%; ne le centre que selon la page entière lorsque le div est mis en position:absolute; . Si vous définissez le div à left:50%; il devrait le faire par rapport à la largeur du div parent. Pour une largeur fixe, faites ceci:

 #parent { width:500px; } #child { left:50%; margin-left:-100px; width:200px; } 

Tout d’abord, vous pouvez le faire avec left: 50% pour le centrer par rapport au div parent mais pour cela vous devez apprendre le positionnement CSS.

Une solution possible est de faire quelque chose comme

  div.parent { text-align:center; } //will center align every thing in this div as well as in the children element div.parent div { text-align:left;} //to restore so every thing would start from left 

si votre div à centrer est positionné relativement, vous pouvez simplement faire

  .mydiv { position:relative; margin:0 auto; } 

à gauche: 50% fonctionne de manière résective avec le parent le plus proche avec la largeur statique atsortingbuée. Essayez width: 500px ou quelque chose sur le div parent. Vous pouvez également centrer le contenu dont vous avez besoin: bloquer et définir les marges gauche et droite sur auto.

Si l’élément enfant est en ligne (par exemple, pas un div , une table etc.), je l’envelopperais à l’intérieur d’un div ou d’un p et alignerais la propriété css sur le texte du wrapper.

  
 This text is aligned to the left.
 So is this text.
 
 This button is centered. 
 This text is still aligned left.  

Sinon, si l’élément est un bloc ( display: block , par exemple un div ou un p ) avec une largeur fixe, je définirais ses propriétés css gauche et droite sur auto.

  
 This text is aligned to the left.
 So is this text.
 
 My parent is centered. 
 This text is still aligned left.  

Vous pouvez bien sûr append un élément text-align: center à l’élément wrapper pour que son contenu soit également centré.

Je ne prendrai pas la peine de me positionner parce que, à mon humble avis, le problème ne se pose pas, mais assurez-vous de vérifier ce lien , très utile.

Créez un nouvel élément div pour centrer votre élément, puis ajoutez une classe spécifique pour centrer cet élément comme ceci

Css

 .centered{ text-align:center; } 

J’ai trouvé une autre solution

et dans le corps

Cela centrera votre contenu div chaque fois que votre conteneur est plus grand ou plus petit. Dans ce cas, votre contenu doit être supérieur à 1100% du conteneur pour ne pas être centré, mais dans ce cas, vous pouvez créer avec containerSecond plus grand, et cela fonctionnera

Atsortingbuer text-align: center; au parent et display: inline-block; à la div.

Si vous souhaitez utiliser CSS3:

 position:absolute; left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx); 

Vous voudrez peut-être effectuer d’autres recherches pour déterminer comment obtenir le pourcentage correspondant à la largeur de votre élément.

par exemple, j’ai un div d’article à l’intérieur d’un div principal de contenu. Dans l’article, il y a une image et sous cette image, un bouton, style comme ceci:

.article {

 width: whatever; text-align: center; float: whatever (in case you got more articles in a row); margin: give it whatever margin you want; 

} .article {

}

/ * dans l’article je veux centrer l’image * /

.article img {

 float: none; margin: 0 auto; padding: give it a padded ridge if you want; 

}

/ * Maintenant, sous cette image dans le même élément article, il devrait y avoir un bouton comme read more Bien sûr, vous devez travailler avec em ou% lorsque vous êtes dans un design sensible * /

.bouton {

 background: #whatever color: padding: 4.3567%; /*Instead of fixed width*/ text-align: cente; font: whatever; max-width: 41.4166%; float: none; margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/ 

}

Bonne chance

Si vous voulez centrer des éléments dans un div et que vous ne vous souciez pas de la taille de la division, vous pouvez utiliser Flex power. Je préfère utiliser flex et ne pas utiliser la taille exacte des éléments.

 
 
 This is the inner Content 
  

Comme vous pouvez le voir, la div externe est un conteneur Flex et la partie interne doit être un élément Flex spécifié avec flex: 1 1 auto; Pour mieux comprendre, vous pouvez voir cet échantillon simple. http://jsfiddle.net/QMaster/hC223/

J’espère que cette aide

Cet article fournit une bonne solution – http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ Fondamentalement: 1. Définissez l’enfant à la position absolue. 2. Définissez le parent pour positionner par rapport. 3. Placez l’enfant à gauche et en haut à 50%. 4. traduire (-50%, – 50%) pour décaler à gauche et en haut de la largeur de l’élément enfant.

le mien voudrait la magie.

 html, body { height: 100%; } .flex-container{ display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -ms-flex-pack: center; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } 
 
Content