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

<代码><；DIV类名="；应用"；>；<；标头类名="；APP-HEADER"；>；<；容器filetype={this.state.currentfiletype}file=this.state.currentfile}/>；<；纸板把手点击={（）=>；this.handleClick（）}/>；<；/页眉>；<；/DIV>；

这是我的容器DIV，它包含文本。Data只调用两句话长的基本.txt文件。

<代码><；DIV类名="；记事本"；>；<；对象数据={"；/注释/"；+props.file}/>；<；/DIV>；

我的CSS看起来像这样

<代码>.app{文本对齐：居中；背景色：#A461F2；}.app-header{高度：100VH；宽度：100VW；最小高度：100VH；显示：Flex；Flex-Direction：列；align-items：居中；Justify-content：中心；字体大小：Calc（10px+2vmin）；颜色：白色；}.notecontainer{填充：40px；显示：Flex；文本对齐：居中；}

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

顺晟科技：

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

我编写了一个脚本，将简单的note.txt转换为具有一个属性的JSON文件。请确保在JSONString的外部使用单个Qoutes，在内部使用两个Qoutes，因为对我来说，它不允许JSON头由单个Qoutes包装。

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

然后，我将文件路径传递给子组件，并使用fetch来获取文本。

.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;
}

通过这种方式，我可以将文本作为文件值传递，并且将应用常规CSS属性。希望这能帮助那些和我遇到同样问题的人。

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

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