Entonces mi código html tiene una estructura como esta.
<div className="App"> <header className="App-header"> <Container fileType={this.state.currentFileType} file= this.state.currentFile} /> <Board handleClick={() => this.handleClick()} /> </header> </div>y este es mi contenedor div que contiene el texto. Los datos simplemente llaman a un archivo .txt básico de dos oraciones.
<div className="NoteContainer"> <object data={"/Notes/" + props.file} /> </div>Mi css se ve así
.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; }Por alguna razón, no puedo obtener el texto que viene de note1.txt al centro. Cualquier ayuda sería muy apreciada.
text-align es para Texto. puedes probar:
align-items: center; justify-content: center; align-content: center;Entonces, después de mucho investigar, no encontré ninguna manera fácil de centrar el texto, así que lo que terminé haciendo es esto >>>
Hice un script para convertir el simple note.txt en un archivo json con un atributo. Asegúrese de usar qoutes individuales alrededor del exterior y doble dentro de jsonString porque para mí no permitía que los encabezados json se envolvieran con qoutes individuales.
jsonString = '{\n "text" : "' + text[i] + '" \n}'; filename = "note" + (i + 1) + ".json" await writeFile(dirToWrite + filename, jsonString);Luego pasé filePath al componente secundario y usé fetch para obtener el texto
try { const text = await fetch(filePath) .then((r) => r.json()) return text; } catch (err) console.log(err); return "Error"; }De esta manera, puedo pasar texto como el valor del archivo y se aplicarán los atributos css regulares. Espero que esto ayude a cualquiera que haya tenido el mismo problema que yo.