在垂直线上垂直写文本

我希望在边界的中心写入文字“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

在垂直线上垂直写文本

回答

相关问题