从对象标签上的数据属性获取文本时，文本对齐不起作用答案

【问题标题】：Text align isn't working when getting text from data attribute on object tag从对象标签上的数据属性获取文本时，文本对齐不起作用
【发布时间】：2021-11-14 16:52:43
【问题描述】：

所以我的html代码是这样的结构。

<div className="App">
  <header className="App-header">
    <Container fileType={this.state.currentFileType} file= this.state.currentFile} />
    <Board handleClick={() => this.handleClick()} />
  </header>
</div>

这是包含文本的容器 div。数据只是调用一个基本的 .txt 文件，两句话长。

<div className="NoteContainer">
   <object data={"/Notes/" + props.file} />
</div>

我的 CSS 看起来像这样

.App{
  text-align: center;
  background-color: #a461f2;
}

.App-header {
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.NoteContainer {
  padding:40px;
  display: flex;
  text-align: center;
}

由于某种原因，我无法将来自 note1.txt 的文本置于中心位置。任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css center text-align

【解决方案1】：

所以经过大量挖掘后，我似乎没有找到任何简单的方法来使文本居中，所以我最终做的是这个>>>

我编写了一个脚本，将简单的 note.txt 转换为具有一个属性的 json 文件。确保在外部使用单个 qoutes 并在 jsonString 内部使用双倍，因为对我来说它不允许 json 标头被单个 qoutes 包装。

jsonString = '{\n   "text" : "' + text[i] + '" \n}';
filename = "note" + (i + 1) + ".json"
await writeFile(dirToWrite + filename, jsonString);

然后我将filePath传递给子组件并使用fetch获取文本

try {
  const text = await fetch(filePath)
  .then((r) => r.json())
  return text;
} catch (err) 
  console.log(err);
  return "Error";
}

这样我可以将文本作为文件值传递，并且将应用常规 css 属性。希望这对遇到和我一样问题的人有所帮助。

【讨论】：

【解决方案2】：

text-align 用于文本。你可以试试：

align-items: center;
justify-content: center;
align-content: center;

【讨论】：