Maison > Article > interface Web > Comment positionner le texte en bas d'un div avec CSS
Comment positionner le texte en bas d'un div avec CSS
- 王林original
- 2020-11-27 11:28:587698parcourir
Méthode CSS pour placer du texte en bas d'un div : cela peut être réalisé à l'aide du positionnement relatif et du positionnement absolu de l'attribut position, tel que [#txt{position:relative;} #txt p {position : absolue ;}].
L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cet article est applicable à toutes les marques d'ordinateurs.
Contexte :
Css n'a pas de paramètre pour aligner le texte au bas du conteneur. Vous pouvez envisager d'utiliser l'attribut position pour résoudre ce problème.
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
Introduction à l'attribut :
L'attribut position spécifie un élément (statique, relatif, absolu ou fixe ) type de méthode de positionnement.
Valeur de l'attribut :
absolu Génère un élément en position absolue, positionné par rapport au premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".
fixe Génère un élément de positionnement fixe, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".
relative Génère un élément relativement positionné, positionné par rapport à sa position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.
Valeur statique par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).
Exemple :
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#txt{
height:300px;
width:300px;
border:1px solid #333333;
text-align:center;
position:relative;
}
#txt p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id=txt>
<p>aadsad</p>
</div>
</body>
</html>Recommandations associées : Tutoriel 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!