垂直对齐矩形中心的段落[重复]答案

【问题标题】：Vertically align paragraph in center of a rectangle [duplicate]垂直对齐矩形中心的段落[重复]
【发布时间】：2021-02-02 16:02:29
【问题描述】：

这是我的代码。您能否指导我如何使用 css 和 d3.js 将段落对齐在矩形的中心。

还有为什么段落开头有空格。段落不应该从矩形的 y 位置开始吗？

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js" integrity="sha512-0XfwGD1nxplHpehcSVI7lY+m/5L37PNHDt+DOc7aLFckwPXjnjeA1oeNbru7YeI4VLs9i+ADnnHEhP69C9CqTA==" crossorigin="anonymous"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

空间可能是由于保证金。您可以通过在 css 中声明元素的边距 0 来更改它。

element {
    margin: 0;
}

我在 css 中居中元素的最佳方式是：

.className {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

您可以设置<p class="classname"></p> 或在css 文件中而不是.className 引用p，但这将适用于您的所有段落。请注意， transform: translate 将元素的参考点从左上角更改为（在此示例中）中心。因此，您的元素可能会从左侧溢出，无法通过滚动查看

【讨论】：