如何制作中间带有文本的竖线？附尝试代码及效果示例

嘿，我明白你想要复刻那种中间带有“or”文本的垂直分隔线效果，你的思路方向是对的，但当前的实现还没达到理想状态——现在的“or”是在竖线旁边，而不是居中嵌入在竖线上。我来给你一个更优雅的最优方案，比旋转<hr>要灵活得多！

问题分析 #

你当前的.vertical-line是给<span>添加左侧边框，文字直接放在边框右侧，这没法让“or”嵌入到竖线中间。我们需要的是竖线被“or”截断，文字居中在竖线上的效果，用CSS伪元素就能完美实现。

优化后的代码 #

HTML 修改

把原来的<span class="vertical-line">or</span>替换成一个专门的分隔容器：

<header>
  <p class="tit1">Simo App</p>
  <p class="tit2">Login</p>
</header>
<div class="tout">
  <h1>Chose a Login Method</h1><br><br>
  <div class="row">
    <div class="col-sm-6">
      <button class="goo"> Google</button><br>
      <button class="face">Facebook</button><br>
      <button class="git">Github</button><br>
    </div>
    <!-- 替换成这个分隔容器 -->
    <div class="or-divider">or</div>
    <div class="col-sm-5">
      <form>
        <label><input type="text" placeholder="Username" class="botona2"></label><br>
        <label><input type="password" placeholder="Password" class="botona2"></label><br>
        <label><input type="submit" value="Login" id="login"></label>
      </form>
    </div>
  </div>
</div>

CSS 修改

添加.or-divider的样式，同时调整.row的布局让三个部分垂直对齐：

* {
  box-sizing: border-box;
}

header {
  background-color: rgb(147, 88, 134);
  width: 100%;
  height: 65px;
}

.tit2 {
  float: right;
  color: white;
  margin-right: 70px;
  font-size: 20px;
  padding: 7px;
  margin-top: 10px;
}

.tit1 {
  float: left;
  color: white;
  font-weight: bold;
  font-size: 25px;
  margin-left: 100px;
  margin-top: 10px;
}

.goo {
  background-color: red;
  color: white;
  width: 200px;
  height: 50px;
}

.face {
  background-color: rgb(27, 122, 255);
  color: white;
  width: 200px;
  height: 50px;
}

.git {
  background-color: black;
  color: white;
  width: 200px;
  height: 50px;
}

.git,
.face,
.goo {
  margin: 10px;
  text-align: center;
  font-weight: bold;
  border-radius: 8px;
}

h1 {
  color: rgb(186, 183, 183);
  text-align: center;
  padding-top: 10px;
}

#login {
  background-color: rgb(147, 88, 134);
  color: white;
  text-align: center;
  border-radius: 4px;
  width: 140px;
  height: 50px;
  font-weight: bold;
  margin: 7px;
}

.botona2 {
  border: 1px solid black;
  border-radius: 2px;
  width: 250px;
  height: 50px;
  padding: 20px;
  margin: 10px;
}

.tout {
  border: 2px solid rgb(235, 235, 235);
  border-radius: 15px;
  width: 80%;
  height: 400px;
  margin: auto;
  margin-top: 80px;
  box-shadow: 5px 10px 18px 10px #dbdbdb;
}

/* 新增：让row变成flex布局，垂直居中对齐 */
.row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 80px); /* 减去h1的高度 */
}

/* 核心：实现带or的垂直分隔线 */
.or-divider {
  position: relative;
  color: #999;
  font-weight: bold;
  padding: 0 15px;
}

.or-divider:before,
.or-divider:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: #ccc;
}

.or-divider:before {
  top: -60px; /* 控制上方竖线的长度 */
  height: 60px;
}

.or-divider:after {
  bottom: -60px; /* 控制下方竖线的长度 */
  height: 60px;
}

方案优势 #

• 相比旋转<hr>的方法，这种伪元素方案不需要处理块级元素的定位问题，样式控制更精准；
• 可以单独调整上下竖线的长度、颜色，以及“or”文本的字体、颜色和间距；
• 配合flex布局的.row，能让左侧按钮、中间分隔线和右侧表单完美垂直对齐，视觉效果更协调。

内容的提问来源于stack exchange，提问作者user20727831