提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

中间文字，两边横线css

CSS 文字 中间 横线
2023-09-14 09:04:05 时间 
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>中间文字，两边横线</title>
		<style>
			.header {
				width: 400px;
				height: 36px;
				line-height: 36px;
				border: 1px solid #00bc12;
				text-align: center;
			}

			.line {
				display: inline-block;
				width: 100px;
				border-top: 1px solid #cccccc;
				vertical-align: 5px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<span class="line"></span>
			<span class="text">中间文字，两边横线</span>
			<span class="line"></span>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

相关文章