Alignement horizontal CSS
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 précédé et suivi de sauts de ligne. Exemples d'éléments de bloc
:
Dans ce chapitre, nous vous expliquerons comment aligner les éléments de bloc horizontalement dans la mise en page.
L'alignement central, à l'aide de l'attribut margin
, les éléments de bloc peuvent définir les marges gauche et droite sur "Auto". Aligner. L'attribut
margin peut être arbitrairement divisé en paramètres de marge gauche et droite et automatiquement spécifié. 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>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</body>
</html>Astuce : Si la largeur est de 100%, l'alignement n'a aucun effet.
Exécutez le programme et essayez-le
Utilisez l'attribut de position pour définir l'alignement à gauche et à droite
L'une des façons d'aligner les éléments La première consiste à utiliser le positionnement absolu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color: #4ce667;
}
</style>
</head>
<body>
<div class="right">
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>Remarque : Le positionnement absolu n'a rien à voir avec le flux de documents, il peut donc couvrir d'autres éléments sur la page.
Exécutez le programme et essayez-le
Utilisez l'attribut float pour définir l'alignement gauche et droit
Utiliser attribut float pour aligner Une des méthodes des éléments :
<!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>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。 青春都是如此，带着疼痛，却又义无反顾。世上本无事，庸人自扰之。人生在世，总是有些空城旧事，年华未央;总是有些季节，一季花凉，满地忧伤。许多事，看开了，便会峰回路转;许多梦，看淡了，便会云开日出。学会思索，学会珍藏，微笑领悟，默默坚强。</p>
</div>
</body>
</html>Exécutez le programme et essayez-le
section suivante
