javascript - 如何将文字设置在水平线中间？-PHP中文网问答

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

天蓬老师 2017-04-11 10:32:05

[JavaScript讨论组]

506

类似这样

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(4)

大家讲道理2017-04-11 10:34:05 4楼

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

<!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>
  <p class="title"><span>测试文字</span></p>
</body>
</html>

赞 +0

添加回复

怪我咯2017-04-11 10:34:05 3楼

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

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

赞 +0

添加回复

阿神2017-04-11 10:34:05 2楼

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

<p class="text-box">
  <span class="text">文字文字</span>
</p>
<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/

赞 +0

添加回复

PHP中文网2017-04-11 10:34:05 1楼

直接上代码：
html部分：

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>