在矩形内对齐段落 [英] Aligning paragraphs inside rectangle

问题描述

我正在尝试使用css"text-align"对齐矩形框内的段落(居中或居右).当段落较小(一个或两个单词)时，它不会对齐，但是段落较大时，则是完美的对齐.

I am trying to align paragraphs (center or right) inside rectangle boxes using css "text-align" When the paragraph is small (one or two words) it does not align but when the paragraph is big, there is perfect alignment.

这是我的代码/努力

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

推荐答案

评论中的有效答案:

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%;
}

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

这篇关于在矩形内对齐段落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！