Tutoriel d'introduction à la mise en page Web CSS 3 : Une colonne avec une largeur fixe, centré

Tutoriel d'introduction à la mise en page Web CSS 3 : Une colonne avec une largeur fixe, centré_Tutoriel de base

PHP中文网

Libérer： 2016-05-16 12:07:20

original

1852 Les gens l'ont consulté

Tutoriel d'introduction à la mise en page Web CSS 3 : Une colonne avec une largeur fixe centrée_Tutoriel de base

Le centrage global de la page est la forme la plus couramment utilisée dans la conception Web. , nous utilisons Pour y parvenir, utilisez l'attribut align="center" du tableau. p lui-même prend également en charge l'attribut align="center", qui peut également faire apparaître p centré. Cependant, la mise en page CSS vise à séparer les performances et le contenu, et l'attribut align est un code de style écrit dans l'attribut p de XHTML. . Cela viole le principe de partage (la séparation peut rendre votre site Web plus gérable), le contenu doit donc être centré à l'aide de méthodes CSS. Prenons comme exemple un code de mise en page à une colonne de largeur fixe et ajoutons-y un style CSS centré :

Le code est le suivant :

#layout {  
    border: 2px solid #A9C9E2;  
    background-color: #E8F5FE;  
    height: 200px;  
    width: 300px;  
    margin:0px auto;  
}

Copier après la connexion

L'attribut margin est utilisé pour contrôler les marges extérieures en haut, à droite, en bas et à gauche directions de l'objet. Lorsque la marge utilise deux paramètres, le premier paramètre représente les marges supérieure et inférieure et le deuxième paramètre représente les marges gauche et droite. En plus d'utiliser directement des valeurs numériques, margin ne prend pas en charge une valeur appelée auto. La valeur auto permet au navigateur de déterminer automatiquement les marges. Ici, nous définissons les marges gauche et droite du p actuel sur auto, et le navigateur les définira. les marges gauche et droite de p. La distance est définie pour être égale et présentée dans un état centré, obtenant ainsi l'effet de milieu de partie.
Remarque : Cette méthode de centrage n'est pas prise en charge par les navigateurs inférieurs à IE6. La section CSS HACK ci-dessous expliquera la solution en détail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

Copier après la connexion

Les étapes de l'opération sont les mêmes qu'une colonne à largeur fixe, sauf que dans l'élément de paramètre de bordure CSS, définissez le haut, la droite, le bas et la gauche de la bordure sur 0, auto, 0, auto respectivement.

Ce qui précède est le contenu du didacticiel d'introduction à la mise en page Web CSS 3 : Une colonne avec une largeur fixe centered_basic. Pour plus de contenu connexe, veuillez prêter attention au didacticiel centered_basic. Site Web chinois PHP (www.php .cn) !