Heim > Artikel > Web-Frontend > So positionieren Sie Text mit CSS am unteren Rand von div
So positionieren Sie Text mit CSS am unteren Rand von div
- 王林Original
- 2020-11-27 11:28:587770Durchsuche
CSS-Methode zum Platzieren von Text am Ende eines Div: Dies kann mithilfe der relativen Positionierung und der absoluten Positionierung des Positionsattributs erreicht werden, z. B. [#txt{position:relative;} #txt p{position:absolute ;}].
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Dieser Artikel gilt für alle Computermarken.
Hintergrund:
Css verfügt nicht über einen Parameter zum Ausrichten des Textes am unteren Rand des Containers. Sie können die Verwendung des Positionsattributs in Betracht ziehen, um dieses Problem zu lösen.
(Lernvideo-Sharing: CSS-Video-Tutorial)
Attributeinführung:
Das Positionsattribut gibt die Art der Positionierungsmethode eines Elements an (statisch, relativ, absolut oder fest).
Attributwert:
absolute Erzeugt ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
fixed Erzeugt fest positionierte Elemente, die relativ zum Browserfenster positioniert sind. Die Position des Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.
relative Erzeugt relativ positionierte Elemente, die relativ zu ihrer normalen Position positioniert sind. Daher fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.
statischer Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (oben, unten, links, rechts oder Z-Index-Deklarationen werden ignoriert).
Beispiel:
<!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>Verwandte Empfehlungen: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonSo positionieren Sie Text mit CSS am unteren Rand von div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!