对齐矩形内的段落答案

【问题标题】：Aligning paragraphs inside rectangle对齐矩形内的段落
【发布时间】：2021-02-10 08:27:38
【问题描述】：

我正在尝试使用 css "text-align" 在矩形框中对齐段落（中心或右侧）当段落很小（一两个词）时，它不会对齐，但当段落很大时，会完美对齐。

这是我的代码/努力

//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>");

【问题讨论】：

你能提供HTMLsn-p吗？
这里是
嗯。确保您已将段落设置为占父元素宽度的 100%。可能，具有 1-2 个单词的
不等于具有更多内容宽度的

。（尝试在您的 CSS 代码中添加“宽度：100%”）
嗨@Serhiy。我试过了，还是不行
嗨，@Zubair。也许，我当时没有得到你的情况，你可以在codepen上设置一个演示吗？这会有很大帮助。另一个幸运的猜测：你可以尝试添加left：0；右：0；到您的 CSS。

标签： javascript css d3.js

【解决方案1】：

来自 cmets 的有效回答：

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>");

.mytext {
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
  width: 100%;
}

 &lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

【讨论】：