Pourquoi mon élément enfant ne s'aligne-t-il pas à gauche avec « gauche : 50 % » ?

La propriété CSS 'Gauche' ne s'aligne pas comme prévu

Lors de l'application de la propriété "gauche : 50 %" pour positionner un élément enfant dans un élément parent, vous pouvez rencontrer des cas où l'élément enfant ne s'aligne pas comme prévu. Cet écart se produit car le positionnement CSS fonctionne en fonction de critères spécifiques.

Comprendre le positionnement en CSS

Dans l'extrait de code fourni, vous avez spécifié des styles CSS pour deux divs, « extérieur » (parent) et « intérieur » (enfant). Le CSS pour le div enfant inclut "gauche : 50 %", dans l'espoir de centrer la bordure gauche de l'enfant dans le div parent. Cependant, cette approche échoue en raison d'une propriété manquante : "position".

Ajout de la propriété 'Position'

Pour que la propriété "left" prenne effet, vous devez définissez la propriété "position" pour le div enfant. Cette propriété spécifie le comportement de positionnement d'un élément. Vous disposez de deux options principales :

• absolu : Supprime un élément du flux normal du document et le positionne par rapport à son ancêtre positionné le plus proche (comme "outher" dans ce cas).
• relative : Positionne un élément par rapport à sa position normale dans le document flow.

Extrait de code révisé

En ajoutant la « position : absolue ; » propriété au div enfant, vous pouvez vous assurer que la propriété « gauche : 50 % » centrera la bordure gauche de l'enfant dans le div parent.

#inner {
   position: absolute;
   left: 50%;
}

Démo pour confirmation visuelle

Référez-vous à la démo mise à jour sur http://jsfiddle.net/vrse2/6/ pour voir comment le CSS modifié centre le div enfant au sein du parent. div comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!