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

Posted 2023-03-05

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

【英文标题】：Text align isn't working when getting text from data attribute on object tag

【发布时间】：2021-11-14 16:52:43

【问题描述】：

所以我的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 的文本置于中心位置。任何帮助将不胜感激。

【参考方案1】：

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

我编写了一个脚本，将简单的 note.txt 转换为具有一个属性的 json 文件。确保在外部使用单个 qoutes 并在 jsonString 内部使用双倍，因为对我来说它不允许 json 标头被单个 qoutes 包装。

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

然后我将filePath传递给子组件并使用fetch获取文本

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

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

【参考方案2】：

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

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