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

Question

所以我的 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 的文本居中显示。任何帮助将不胜感激。

Answer 1

文本对齐用于文本。你可以试试：

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

Answer 2

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

我制作了一个脚本，将简单的 note.txt 转换为具有一个属性的 json 文件。确保在外部使用单引号并在 jsonString 内使用双引号，因为对我来说它不允许 json headers 被单引号包裹。

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

然后我将文件路径传递给 child 组件并使用 fetch 获取文本

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

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

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

Text align isn't working when getting text from data attribute on object tag

html

javascript

css

text-align

center