javascript - 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.

标签： javascripthtmlcsscentertext-align

Answer 1

text-align is for Text. you can try:

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