CSS Aligner(alignement)
CSS Alignement horizontal
En CSS, il existe plusieurs propriétés pour l'alignement horizontal des éléments.
Alignement des éléments de bloc
L'élément de bloc est un élément qui occupe toute la largeur et est entouré de sauts de ligne. Exemples d'éléments de bloc
:
<h1>
<p>
<div>
Alignement du texte, veuillez vous référer au chapitre CSS Text. .
Dans ce chapitre, nous vous expliquerons 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 fonctionne pas correctement à moins d'être déclarée !DOCTYPE
L'attribut margin peut être arbitrairement divisé en paramètres de marge gauche et droite et spécifié automatiquement. Le résultat est un élément centré :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html>. Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Astuce : Si la largeur est de 100 %, l'alignement n'a aucun effet.
Remarque : Il existe un bug de traitement des marges pour les éléments de bloc dans IE5. Pour que l’exemple ci-dessus fonctionne dans IE5, du code supplémentaire doit être ajouté. Exemple
Utilisez l'attribut position pour définir l'alignement à gauche et à droite
L'une des façons d'aligner les éléments consiste à utiliser le positionnement absolu :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : Positionnement et documentation absolus Indépendants du flux, afin qu'ils puissent superposer d'autres éléments sur la page.
Utiliser 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">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Utilisez Padding pour définir la verticale alignement central
Un moyen simple de définir l'alignement central vertical en CSS consiste à utiliser un remplissage :
en haut de la tête.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Exécuter l'instance ?
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Si vous souhaitez centrer à la fois horizontalement et verticalement, vous pouvez utiliser padding et text-align: center:
Je suis centré horizontalement et verticalement.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html>Exécuter l'instance ?
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Utilisez la hauteur de ligne pour définir le centrage vertical
Je suis centré verticalement.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Exécuter l'instance ?
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Utilisez la position et la transformation pour définir le centrage vertical
En plus d'utiliser les attributs de remplissage et de hauteur de ligne, nous pouvons également utiliser l'attribut transform Pour définir le centrage vertical :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>Exécuter l'instance ?
Cliquez sur le bouton Bouton « Exécuter l'instance » pour afficher l'instance en ligne
Conseils : pour plus de contenu sur les attributs de transformation, veuillez vous référer au Chapitre inversé 2D.
Problèmes 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">
<title>php中文网(php.cn)</title>
<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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
