Javascript 在矩形内对齐段落

我正在尝试使用css“文本对齐”对齐矩形框内的段落（中间或右侧） 当段落很小（一两个单词）时，它不会对齐，但当段落很大时，它会完美对齐

这是我的代码/努力

//html
 <script src="https://d3js.org/d3.v5.min.js"></script>

//css
p {
  margin: 0;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
}
//javascript
let svg = d3
  .select("body")
  .append("svg") 
  .attr("width", 1000)
  .attr("height", 1000);

let text = [
  "WHO Coronavirus disease situation dashboard presents official daily counts of COVID-19",
  "Data Analysis",
  "Javascript",
  "Compare Performance of S&P 500 Index against other Indices"
];
let rect = svg
  .selectAll("rect")
  .data([0, 150, 300, 450])
  .enter()
  .append("rect")
  .attr("width", (d, i) => 200)
  .attr("height", 150)
  .attr("x", (d, i) => 0)
  .attr("y", (d) => d)
  .attr("fill", "grey")
  .attr("stroke", "black");

let texty = svg
  .selectAll("boxestext")
  .data([0, 150, 300, 450])
  .enter()
  .append("foreignObject")
  .attr("width", (d, i) => 200)
  .attr("height", 150)
  .attr("x", (d, i) => 0)
  .attr("y", (d) => d)
  .attr("class", "boxes")
  .append("xhtml:body")
  .attr("class", "mytext")
  .attr("id", (d, i) => "mytext" + i)
  .style("font", 50)
  .html((d, i) => "<p>" + text[i] + "</p>");

//html
//css
p{
保证金：0；
位置：绝对位置；
转化：translateY（-50%）；
最高：50%；
文本对齐：居中；
}
//javascript
设svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，1000）
.attr（“高度”，1000）；
让文本=[
“世卫组织冠状病毒疾病情况仪表盘提供官方每日新冠病毒-19计数”，
“数据分析”，
“Javascript”，
“比较标准普尔500指数与其他指数的表现”
];
设rect=svg
.selectAll（“rect”）
.数据（[015030450]）
.输入（）
.append（“rect”）
.attr（“宽度”，（d，i）=>200）
.attr（“高度”，150）
.attr（“x”，（d，i）=>0）
.attr（“y”，（d）=>d）
.attr（“填充”、“灰色”）
.attr（“笔划”、“黑色”）；
设texty=svg
.selectAll（“box文本”）
.数据（[015030450]）
.输入（）
.append（“外来对象”）
.attr（“宽度”，（d，i）=>200）
.attr（“高度”，150）
.attr（“x”，（d，i）=>0）
.attr（“y”，（d）=>d）
.attr（“类”、“框”）
.append（“xhtml:body”）
.attr（“类”、“我的文本”）
.attr（“id”、（d，i）=>“mytext”+i）
.style（“字体”，50）
.html（（d，i）=>“”+文本[i]+“
”）；

评论中的工作答案：

让svg=d3
.选择（“正文”）
.append（“svg”）
.attr（“宽度”，1000）
.attr（“高度”，1000）；
让文本=[
“世卫组织冠状病毒疾病情况仪表盘提供官方每日新冠病毒-19计数”，
“数据分析”，
“Javascript”，
“比较标准普尔500指数与其他指数的表现”
];
设rect=svg
.selectAll（“rect”）
.数据（[015030450]）
.输入（）
.append（“rect”）
.attr（“宽度”，（d，i）=>200）
.attr（“高度”，150）
.attr（“x”，（d，i）=>0）
.attr（“y”，（d）=>d）
.attr（“填充”、“灰色”）
.attr（“笔划”、“黑色”）；
设texty=svg
.selectAll（“box文本”）
.数据（[015030450]）
.输入（）
.append（“外来对象”）
.attr（“宽度”，（d，i）=>200）
.attr（“高度”，150）
.attr（“x”，（d，i）=>0）
.attr（“y”，（d）=>d）
.attr（“类”、“框”）
.append（“xhtml:body”）
.attr（“类”、“我的文本”）
.attr（“id”、（d，i）=>“mytext”+i）
.style（“字体”，50）
.html（（d，i）=>“”+文本[i]+“
”）
.mytext{
宽度：100%；
身高：100%；
保证金：0；
}
p{
保证金：0；
位置：绝对位置；
转化：translateY（-50%）；
最高：50%；
文本对齐：居中；
宽度：100%；
}
你能为此提供
HTML
代码片段吗？这里是d3js.org/d3.v5.min.js“>hm。确保你已经将段落设置为占据父元素100%的宽度。可能，1-2个单词的不等于内容宽度更宽的。（尝试在css代码中添加“宽度：100%”）嗨@Serhiy。我试过了，但没用嗨，@Zubair。也许，我当时不了解你的情况，你能在codepen上设置一个演示吗？这会有很大帮助。另一个幸运的来宾：你可以尝试将左：0；右：0；添加到你的CSS中。