Question

这是我的JsFiddle

我希望写下文字＆＃34; OR＆＃34;在边境的中心。我以绝对的位置做到了。有没有更好的解决方案呢。

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

Answer 1

你做得很好。什么是“更好”是主观的，因为这将取决于您的具体用例。

假设从单词“OR”开始，您希望将该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;
}

Answer 2

您的代码对我来说很好，我在下面发布了一个稍微修改过的版本。

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;
}

Answer 3

您可以尝试使用精确的垂直对齐方式而不使用绝对位置：

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;
}

将文本垂直写在垂直线上

3 个答案: