在垂直線上垂直寫文本

我希望在邊界的中心寫入文字「OR」。我以絕對的姿勢做到了。有沒有更好的解決方案呢。

.test { 
width: 300px; 
height: 300px; 
border-right: 1px solid #000; 
position: relative; 
} 
.test::after { 
content: 'OR'; 
position: absolute; 
background: #FFF; 
left: 291px; 
top: 140px; 
}

來源

2014-05-13 shubendrak

這是正確的選擇。 –

你在做什麼是好的。什麼是「更好」是主觀的，因爲這取決於你的具體用例。

從單詞「或」中假設您要使用該div作爲內容的分隔符。

在這種情況下，我所看到的一個問題是寬大的固定寬度（300px），當您嘗試將其用作內容的分隔符時，可能會使您處於狹窄的位置。你將不得不把一個內容放在那個div中，而另一個替代（用「或」來比較），並以某種方式將它們堆疊在一起。您可能無法以流暢的佈局獲取此內容。

如果我是正確的，你想擁有的東西是這樣的：

演示：http://jsfiddle.net/abhitalks/rNQjX/15/

想法是使用一個單獨的DIV和使用純粹作爲分隔符。這將允許您更改獨立於內容的分隔符。使用這種佈局，瀏覽器/窗口寬度/高度的變化將是流暢的。

示例標記：

<div></div> <!-- regular page content --> 
<div class="wrap"> <!-- wrapper for comparison content --> 
    <div class="content"></div> <!-- content option 1 --> 
    <div class="sep"></div> <!-- *** Seperator *** --> 
    <div class="content"></div> <!-- content option 2 --> 
</div> 
<div></div> <!-- regular page content -->

範例CSS：

div.wrap { /* wrapper for comparison content */ 
    height: auto; 
    background-color: #ccc; 
    position: relative; 
} 
div.content { /* content div */ 
    float: left; 
    width: 50%; 
} 
div.sep { /* separator div */ 
    width: 1px; 
    border: 1px solid gray; 
    margin-left: -3px; 
    position: absolute; 
    top: 0px; bottom: 0px; 
    left: 50%; 
} 
div.sep::after { /* separator text */ 
    content:'OR'; 
    position: absolute; 
    top: 48%; left: -14px; 
    background-color: #ccc; 
}

來源

2014-06-06 08:10:26 Abhitalks

你的代碼對我來說看起來不錯，我在一個稍微修改過的版本下面發佈。

http://jsfiddle.net/rNQjX/14/

.test { 
    width: 300px; 
    height: 300px; 
    border-right: 1px solid #000; 
    position: relative; 
} 
.test::after { 
    content:'OR'; 
    background: #FFF; 
    position: inherit; 
    margin-left: 291px; 
    top: 140px; 
}

來源

2014-06-06 05:52:38 GibboK

你可以試試這個有確切的垂直對齊沒有絕對位置：

http://jsfiddle.net/kongkannika/rNQjX/18/

.test { 
    width: 300px; 
    height: 300px; 
    border-right: 1px solid #000; 
} 
.test::after { 
    content: 'OR'; 
    background: #FFF; 
    line-height: 300px; 
    margin-left: 290px; 
}

來源

2014-06-06 08:06:44 Kannika

在垂直線上垂直寫文本

回答

相關問題