html - 围绕中心字母格式化单词

Question

我正在使用 reactjs 呈现文本，看起来就像我在用旧式打字机打字一样。为了给文本添加样式，我将它分成每个单词的元素，如下所示:

<div><span>HUMPTY </span><span>DUMPTY </span><span>SAT </span></div>

要像打字机一样，我希望其中一个单词的特定字母(例如，“SAT”中的“S”)正好位于容器的中央。我试着把那个词分成跨度，像这样:

<span>S</span><span>A</span><span>T</span>

现在我想放置，比方说，<span>A</span>在包含的 div 的精确中心，并让文本的其余部分向左和向右倾斜(如有必要，溢出，而不是换行)。

我尝试将包含的 div 样式设置为“flex”并告诉它用“space-around”对齐，但这会分散文字。我也尝试过使用“边距 0”设置中心跨度的样式，但由于某种原因，这并没有使该 div 居中。

谁能帮我实现我所描述的这种效果？

Answer 1

And now I'd like to place, say, the A in the precise center of the containing div, and have the rest of the text fall to the left and to the right [...]

不是使用 flexbox 的专家，但至少我通过将文本分成三部分并使用 flex-basis 属性使这部分工作正常。可能需要对包裹部分进行一些微调，并正确处理各部分之间的间距。

div {
  font-family: monospace;
  font-size: 2em;
  display: flex;
}

span:first-child,
span:last-child {
  flex-basis: 50%;
}

span:first-child {
  text-align: right;
}

/* from here for demo purposes only */

span.centered {
  color: red;
}

p {
  text-align: center;
}

p:before {
  content: "";
  display: block;
  margin: 0px auto;
  height: 15px;
  width: 2px;
  background: red;
}

<div><span>HUMPTY DUMPTY S</span><span class="centered">A</span><span>T</span></div>

<p>center</p>