編碼的世界 / 優質文選 / 生涯

css實現中間文字 兩端橫線的兩種方法


2022年1月20日
-   

效果圖

代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>line</title>
<style>
/*第一種方法*/
fieldset{border: none;padding: 0;border-top: 1px blue solid;text-align: center;width: 300px;margin: auto;}
legend{padding: 0 10px;font-size: 16px;color: blue;}
/*第二種方法*/
.title{color: red;text-align: center;font-size: 16px;}
.title:before,.title:after{content: "";width: 100px;border-top: 1px red solid; display: inline-block;
vertical-align: middle;}
.title:before{margin-right: 10px;}
.title:after{margin-left: 10px;}
</style>
</head>
<body bgcolor="#F2F2F2">
<!第一種方法>
<fieldset><legend><span>第一種方法</span></legend></fieldset>
<!第二種方法>
<div class="title">第二種方法</div>
</body>
</html>

熱門文章