Alignement horizontal CSS
Alignement horizontal CSS (Horizontal Align)
Alignement des éléments de bloc
L'élément de bloc est un élément qui occupe toute la largeur, avec des sauts de ligne avant et après. Exemples d'éléments de bloc
:
<h1>
<p>
<div>
Dans ce In dans ce chapitre, nous allons vous montrer comment aligner les éléments de bloc horizontalement dans la mise en page.
Alignement central, utilisez l'attribut margin
élément de bloc pour définir les marges gauche et droite sur un alignement "automatique".
Remarque : L'utilisation de l'attribut margin:auto dans IE8 ne fonctionnera pas correctement à moins que vous ne déclariez !DOCTYPE
l'attribut margin peut être arbitrairement divisé en paramètres de marge gauche et droite pour spécifier automatiquement les résultats A. l'élément centré apparaît :
instance
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}Astuce : Si la largeur est de 100%, l'alignement n'a aucun effet.
Remarque : Il existe un bug de traitement des marges dans les éléments de bloc dans IE5. Pour que l’exemple ci-dessus fonctionne dans IE5, du code supplémentaire doit être ajouté.
Problèmes de compatibilité entre navigateurs
<pLors de l'alignement d'éléments comme celui-ci, c'est toujours une bonne idée de prédéterminer la marge et le remplissage de l'élément. Ceci afin d'éviter les différences visuelles dans les différents navigateurs.
IE8 et versions antérieures rencontrent un problème lors de l'utilisation de l'attribut position. Si un élément conteneur (dans ce cas <div class="container">) a une largeur spécifiée et que la déclaration !DOCTYPE est manquante, IE8 et les versions antérieures ajouteront une marge de 17 px à droite. Cela semble être un espace réservé de défilement. Lorsque vous utilisez l'attribut position, définissez-le toujours dans la déclaration DOCTYPE !
Utilisez les attributs float pour définir l'alignement à gauche et à droite
L'utilisation des attributs float est l'un des moyens d'aligner les éléments :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>凡是到达了的地方，都属于昨天。哪怕那山再青，那水再秀，那风再温柔。带深的流连便成了一种羁绊，绊住的不仅是双脚，还有未来。</p>
<p>怎麽能不喜欢出发呢？没见过大山的巍峨，真是遗憾；见了大山的巍峨没见过大海的浩翰，仍然是遗憾；
见了大海的浩翰没见过大漠的广袤，依旧遗憾；见了大漠的广袤没见过森林的神秘，还是遗憾。世界上有不绝的风景，我有不老的心情。</p>
</div>
</body>
</html>Problème de compatibilité entre navigateurs
Lors de l’alignement d’éléments comme celui-ci, c’est toujours une bonne idée de prédéterminer la marge et le remplissage de l’élément. Ceci afin d'éviter les différences visuelles dans les différents navigateurs.
IE8 et versions antérieures rencontrent un problème lors de l'utilisation de l'attribut float. Si un élément conteneur (dans ce cas <div class="container">) a une largeur spécifiée et que la déclaration !DOCTYPE est manquante, IE8 et les versions antérieures ajouteront une marge de 17 px à droite. Cela semble être un espace réservé de défilement. Lorsque vous utilisez l'attribut float, définissez-le toujours dans la déclaration DOCTYPE !
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
