Home > Article > Web Front-end > How to set text on div border with css
How to set text on div border with css
- WBOYOriginal
- 2021-12-02 13:37:148156browse
Setting method: 1. Place the text element on the div element; 2. Add the "position:relative;" style to the text element to set it to relative positioning; 3. Add "top: up and down" to the text element Position value; left: left and right position value;" style, just set the text position to the div border.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to set text on the div border in css
You can use the position attribute to set the text in the border of the div to an absolute positioning style, and then Just position it on the border.
The example is as follows:
<!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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set text on div border with css. For more information, please follow other related articles on the PHP Chinese website!