如何将文字设置在水平线中间？

发布于
2016-12-15

✓ 已被采纳

试试下面这个，看看是不是你想要的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .title{
      text-align: center;
      overflow: hidden;
    }
    .title span{
      position: relative;
      display: inline-block;
    }
    .title span::before{
      content: '';
      position: absolute;
      top: 50%;
      width: 1000px;
      height: 1px;
      left: 100%;
      background-color: #333;
    }
    .title span::after{
      content: '';
      position: absolute;
      top: 50%;
      right: 100%;
      width: 1000px;
      height: 1px;
      background-color: #333;
    }
  </style>
</head>
<body>
  <div class="title"><span>测试文字</span></div>
</body>
</html>

super_newbie

2921819

发布于
2016-12-15

这时候就是推广文章的时候，请看这里，详细介绍：

CSS实现删除线贯穿中线效果

秋刀鱼Bin

63311731

发布于
2016-12-16

除了上面的方法，还有个自己以前琢磨出来的办法。

<div class="text-box">
  <span class="text">文字文字</span>
</div>
<style>
.text-box {
    display:table;
    width:100%;
}
.text {
    display:table-cell;
    width: 90px;
    text-align: center;
    position:relative;
    bottom:-4px;
}
.text-box::before,.text-box::after {
    content:"";
    display:table-cell;
    border-bottom:#ccc solid 1px;
}
</style>

https://jsfiddle.net/67n5dcod/1/

寒晓破天

2435

发布于
2016-12-16

直接上代码：
html部分：

        <div class="bottom-line"></div>
        <div class="time"></div>

css部分：

.bottom-line{
  position: relative;
  width: 27.6rem;
  height: 1px;
  background-color: #E6E6E6;
  margin: 3rem auto 0
}
.time{
  position: relative;
  color: #999999;
  width: 10rem;
  margin: -0.5rem auto 0;
  z-index: 5;
  text-align: center;
  background-color: #fff;
}

查看全部 4 个回答

如何将文字设置在水平线中间？

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

怎么获取动态弹出对话框的模拟单击？

如何实现类似豆包的AI改写框跟随内容滚动效果？