Heim >Web-Frontend >CSS-Tutorial >So legen Sie mit CSS Text am Div-Rand fest

So legen Sie mit CSS Text am Div-Rand fest

WBOY
WBOYOriginal
2021-12-02 13:37:148262Durchsuche

Einstellungsmethode: 1. Platzieren Sie das Textelement auf dem div-Element. 2. Fügen Sie dem Textelement den Stil „position:relative;“ hinzu, um es auf relative Positionierung festzulegen. links" zum Textelement: Linker und rechter Positionswert;" Legen Sie einfach die Textposition auf den Div-Rand fest.

So legen Sie mit CSS Text am Div-Rand fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So legen Sie Text am Div-Rand mit CSS fest

Sie können das Positionsattribut verwenden, um den Text im Div-Rand auf einen absoluten Positionierungsstil festzulegen und ihn dann am Rand zu positionieren.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
div{
    width:200px;
    height:100px;
    padding:5px 30px;
    border:4px solid #ebcbbe;
}
span.title{
    display:block;
    width:150px;
    height:30px;
    position:relative;
    top:-15px;
    text-align: center;
    background: white;
}
</style>
</head>
<body>
<div>
    <span class="title">我是边框上的文字</span>
    
</div>
</body>
</html>

Ausgabeergebnis:

So legen Sie mit CSS Text am Div-Rand fest

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie mit CSS Text am Div-Rand fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn