Comment définir l'alignement en CSS-tutoriel CSS-php.cn

Comment définir l'alignement en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:10

original

7430 Les gens l'ont consulté

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.

Comment définir l'alignement en CSS

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>

Copier après la connexion

Comment définir lalignement en CSS

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 (

dans notre cas) est défini sur une largeur spécifiée et que la déclaration !DOCTYPE est omise, alors IE8 et versions antérieures ajouteront 17 px de marge à droite. Par exemple :

<!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>

Copier après la connexion

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>

Copier après la connexion

Comment définir lalignement en CSS