【佈局】標題(圖示)在橫線的中間!
阿新 • • 發佈:2021-01-25
技術標籤:# 佈局
用到的知識點:水平垂直居中、定位、層級等。
<div class="line-icon">
<p></p>
<span>標題</span>
</div>
.line-icon{ position: relative; height:50px; width:100%; border:1px solid black; } .line-icon p,.line-icon span{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background:red; } .line-icon p{ top:10px; height:1px; width:50%; z-index:-1; } .line-icon span{ height:30px; width:50px; line-height:30px; text-align:center; z-index: 1; background: white; }