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

Question

So my html code is structure like this.

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

and this is my Container div which contains the text. Data just calls a basic .txt file two sentences long.

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

My css looks like this

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

For some reason I can't get the text coming from note1.txt to center. Any help would be greatly appreciated.

Answer 1

So after a lot of digging I didn't seem to find any easy way of centering text this so What I ended up doing is this >>>

I made a script to turn the simple note.txt into a json file with one attribute. Make sure to use single qoutes around the outside and double inside the jsonString because for me it didn't allow the json headers to be wrapped by single qoutes.

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

Then I passed the filePath to the child component and used fetch to get the text

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

This way I can pass text as the file value and regular css attributes will apply. Hope this helps anyone who ran into the same problem as me.