Maison >interface Web >tutoriel CSS >Comment définir l'alignement en CSS
Comment définir l'alignement en CSS
- 醉折花枝作酒筹original
- 2021-04-20 17:22:537481parcourir
Méthode de paramétrage : 1. Utilisez l'instruction "margin:0px auto" pour définir l'alignement horizontal ; 2. Utilisez l'attribut position et les attributs haut, bas, gauche et droit pour définir l'alignement gauche ou droit ; 3. Utilisez l'instruction "float: right|left" pour définir l'alignement à gauche ou à droite.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. Utilisez l'attribut margin pour aligner les éléments horizontalement
Vous pouvez aligner les éléments en définissant les marges gauche et droite sur "auto". Mais le principe est qu’il faut le dire ! DOCTYPE, sinon il n'est pas valide dans IE8. Cela centrera l'élément, par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{
margin: 0px auto;
width: 70%;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Conseil : Si la largeur est de 100 %, l'alignement n'a aucun effet.
2. Utilisez l'attribut position pour l'alignement à gauche et à droite
L'utilisation de cette méthode est sans aucun doute la meilleure méthode en termes de compatibilité, mais lorsque vous utilisez l'attribut position, veuillez toujours la définir ! , il y a un problème dans IE8 et les versions antérieures. Si l'élément conteneur (
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.container{
position: relative;
width: 100%;
}
.right{
position: absolute;
right: 0px;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>3. Utilisez l'attribut float pour l'alignement à gauche et à droite
Il y a un problème dans IE8 et les versions antérieures lors de l'utilisation de l'attribut float. Si la déclaration !DOCTYPE est omise, IE8 et versions antérieures ajouteront 17 px de marge à droite. Cela semble être un espace réservé à la barre de défilement. Lorsque vous utilisez l'attribut float, définissez toujours la déclaration !DOCTYPE : Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
.right{
float: right;
width: 300px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="right"></div>
</div>
</body>
</html>
Apprentissage recommandé : Tutoriel vidéo CSS
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!