頁面中間的水平線

Question

我想在頁面中間有一條水平線。有些東西就像

<div class="line"> 
    <hr> 
</div> 

.line { 
    top: 50%; 
} 

但這不起作用。我不希望由我自己寫的行狀

<p> _______________________________________</p>

是否有某種方式來居中小時？

Answer 1

您需要將該行從文檔的正常流程中取出，然後才能設置頂層屬性。試試這個

.line { 
 
    position:absolute; 
 
    width:100%; 
 
    top: 50%; 
 
}

<hr class="line">

JS小提琴：https://jsfiddle.net/q9o5q70z/

Answer 2

使用<hr>標籤，這就是它的功能。

Answer 3

下面是一個示例標記和樣式表，以獲得hr的工作。我已經設置了兩個寬度（大致）佔據頁面的整個高度，然後用水平線將它們分開。

只需運行下面的代碼片段，或檢查Demo here。

div { 
 
    height: 45vh; 
 
} 
 

 
span { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
hr { 
 
    height: 2px; 
 
    background: red; 
 
    border: 0; 
 
}

<div> 
 
    <span>some content</span> 
 
</div> 
 
<hr> 
 
<div> 
 
    <span>other content</span> 
 
</div>