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

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