css实现标题左右两边的线条,中间文字显示

作者：Jasmine - 2021年01月05日

<!DOCTYPE html>
<html lang="zh">
	<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></title>
		<style type="text/css">
			.common-title {
				width: 100%;
				height: 44px;
				display: flex;
				justify-content: center;
			}

			.common-title-line {
				width: 15%;
				margin: 0 3%;
				height: 1px;
				background: #E3E3E3;
				margin-top: 21px;
			}

			.common-title-txt {
				width: 35%;
				text-align: center;
				line-height: 44px;
				font-size: 16px;
				white-space: nowrap;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="common-title" style="margin-top:15px;">
			<div class="common-title-line"></div>
			<div class="common-title-txt">普通文字列表 1111111</div>
			<div class="common-title-line"></div>
		</div>
	</body>
</html>

代码如上,效果如下:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/719

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！