javascript - 如何水平居中单词的特定字母？

Question

<分区>

Answer 1

这是实现您正在寻找的效果的一种方法。

浅灰色x-axis和 y-axis只是为了证明 N 始终位于容器的中心。

容器的第二个版本给出了 flex-spaced <spans>红色轮廓更清楚地显示 CSS 如何使 N 始终保持居中。

工作示例:

const myDivs = [... document.getElementsByTagName('div')];
let divTextArray;
let divContent;

myDivs.forEach((div) => {

  divTextArray = [... div.textContent];
  divContent = '';
  
  divTextArray.forEach((letter) => {
    divContent += '<span>' + letter + '</span>';
  });
  
  div.innerHTML = divContent;
  div.innerHTML += '<div class="x-axis"></div>';
  div.innerHTML += '<div class="y-axis"></div>';
});

.container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 120px;
  margin: 12px;
  padding: 12px;
  border: 1px solid rgb(0, 0, 0);
  text-transform: uppercase;
  overflow: auto;
  resize: both;
}

.container span {
  width: 20%;
  text-align: center;
}

div:nth-of-type(2) span {
  border: 1px solid red;
}

.x-axis,
.y-axis {
  position: absolute;
  background-color: rgb(191, 191, 191);
}

.x-axis {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.y-axis {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

<h2>Resize the containers below...</h2>
<div class="container">Ipnos</div>
<div class="container">Ipnos</div>

---

说明:

结合使用:

• 用 <span> 包围每个字母(使用javascript)
• 声明宽度为20%对于每个 span (即五分之一，因为有 5 个字母)
• CSS flexbox确保所有<spans>相对于其 <div class="container"> 的水平和垂直中心定位
• 声明text-align: center对于每个 <span>确保每个字母都位于其父元素的中心 <span>

可以保证五个字母最中间的中心对应<div class="container">的水平中心.