在垂直线上垂直居中书写文本

Question

这是我的JsFiddle

我想在边框的中间写"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;
}

Answer 1

你做的很好。什么是"更好"是主观的，因为这取决于你具体的用例。

假设从单词"OR"中，您想使用该div作为内容的分隔符。

在这种情况下，我看到的一个问题是大的固定宽度(300px)，当你试图用它作为内容的分隔符时，它会让你陷入困境。您必须将一个内容放在该div中，而将另一个可选内容(用于与"或"进行比较)放在另一个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;
}