Question

我试图找到一种方法用css和html来标题这样的标题：

[SPAN variable width ] ------------- Always Center Text -- [     SPAN, variable width     ]

中心必须为文字
固定在右侧，左侧侧必须是 span 。

问题是，始终居中文字必须根据左右元素的变量宽度位于中间。（它们可以更小或更宽）

注意：---是一条连续的水平线，如元素之间的代码所示，在开头和结尾都有一个小的填充。

这是我到目前为止所得到的：的 https://fiddle.jshell.net/cfmnvjhx/1/

Answer 1

你可以这样做

.row {
  position: relative;
}
.center-line {
  color: #00BF2D;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: auto;
  z-index: 1;
}
.center-line span{
  position: relative;
  padding: 0 10px;
  background: white;
}
.center-line:before {
  content: ' ';
  position: absolute;
  height: 1px;
  top: 50%;
  left: 0;
  right: 0;
  background: gray;
}
.label{
  padding: 5px;
  position: relative;
  background: gray;
  z-index: 2;
}

<div style="width:600px"> <!-- UNCHANGEABLE -->
  <div class="row">
    <div style="float: left;">
      <span class="label label-default">WWWWWIIIIIDEEEEE</span>
    </div>
    <div style="float: right;">
      <span class="label label-default">small</span>
    </div>
    <div class="center-line" style="margin: 0 auto">
      <span>Always Center Text</span>
    </div>
  </div>
</div>

在左右两个动态范围之间居中文本

1 个答案: