如何将文本定位在左侧、中心和右侧，中间有一条线？答案

【问题标题】：How to position text left, center, and right with a line in the middle?如何将文本定位在左侧、中心和右侧，中间有一条线？
【发布时间】：2019-03-15 07:01:58
【问题描述】：

我想创建以下内容：

Left Text - - - - - - Center Text - - - - - - Right Text

其中 - - - - - 是一条 1px 的虚线，位于文本高度的中间。

【问题讨论】：

我相信您的问题被否决了，因为您没有提供任何代码来显示您尝试的内容。发生这种情况时，我正在输入我的答案。我对这里的贡献有点陌生，所以不确定我在这里给你完整的答案是否做错了。
@Simran 你没有做错事错但你可能会鼓励人们再次提出这样的问题，这不是我们想要的，因为它是一个高问答的地方，而不是我不知道怎么做，给我做吧。所以最好避免回答，因为如果稍后关闭/删除问题，您也可能会浪费时间。
@TemaniAfif 非常有意义。当我注意到反对票时，我刚刚发布了解决方案。这只是我贡献的第三天，仍然在了解我的方位。

标签： html css

【解决方案1】：

带有space-between 的弹性盒容器。虚线是 1px 高度跨度的边界。确保文本跨度不会随着flex: 0 0 auto; 而增长

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .text {
  flex: 0 0 auto;
}
.container .dashed {
  display: block;
  width: 50%;
  height: 1px;
  border-top: 1px dashed #000;
  margin: 0 5px;
  box-sizing: border-box;
}

<div class="container">
    <span class="text">Left Text</span>
    <span class="dashed"></span>
    <span class="text">Center Text</span>
    <span class="dashed"></span>
    <span class="text">Right Text</span>
</div>

【讨论】：

【解决方案2】：

我会这样做：https://jsfiddle.net/s59rzh4b/

<div class="outer">
  <div class="center">
    <span class="middle">More text</span>
  </div>
  <span class="left">Some text</span>
  <span class="right">Even more...</span>
</div>

.outer {
  position: relative;
  width: 100%;
}

.outer > * {
  position: absolute;
  background: white;
  padding: 0 5px;
  top: 0;
}

.left {
  left: 0;
}

.center {
  text-align: center;
  width: 100%;
  height: 8px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 2px 0;
}

.middle {
  background: white;
  padding: 0 5px;
}

.right {
  right: 0;
}

【讨论】：

【解决方案3】：

html, body, .grid-container { height: 100%; margin: 0; }

.grid-container *:after { 
 position: absolute;
 top: 0;
 left: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "t1 t2 t3" ". . ." ". . .";
 txt-align: center;
  
}

.t1 { grid-area: t1; }

.t2 { grid-area: t2; }

.t3 { grid-area: t3; }

<div class="grid-container">
  <div class="t1">sfsfds -----------------------</div>
  <div class="t2">dsfsdf -------------------</div>
  <div class="t3">dsfdsf -----------------------</div>
</div>

这个？？

【讨论】：