Question

我试图将文本放在DIV内的SVG元素上。我已在此JsFiddle Example, Here中汇总了我的目标的简单模型。

CSS：

    </div>
    <div class="mainScr">
      <div id="visual" class="screenParts">
        <div class="graphicsPanel">
          <div class="displayValues">
        <p id="titleLabel" class="displayText">ParamName</p>
        <p id="valuLabel" class="displayText">Value</p>
        <p id="timerLabel" class="displayText">Description</p>
          </div>
<!--SVG Circle goes here, I removed it to prevent screen cluttering here, but it is included in the original JsFiddle Link-->
        </div>
      </div>
    </div>
</body>

HTML：

.graphicsPanel {
  position: relative;
  width: 100%;
  height: 66%;
  border: 1px solid blue;
  background: lightblue;
}

.displayValues {
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translateX(-50%) translateY(-50%);              
}

目标是将所有三行文本（垂直和水平）集中在该圆圈的中间。（在主要工作中，圆圈是一个更复杂的HMI，它显示一些信息，如时钟或指南针，用手和JS代码控制它。）我还需要我的父div（ graphicsPanel ）来只占用css代码中指定的屏幕的半个小时。

到目前为止，我已经尝试了所有选项in the answers to this question。

他们不能发挥作用的一些原因是：

我要显示多行文字
文本行的高度不固定（在实际工作中，每个文本行有自己的特定高度）
父div（ graphicsPanel ）的高度/大小未修复。
我希望文字漂浮在圆圈的中心，而不是在它之前或之上，或....，....

我真的很喜欢html / css解决方案。我的计划B和C选项将是：

计划B：编写一个可在屏幕上动态移动文本的JS代码大小改变了事件。
计划C：在SVG中写入文本并使用相同的JS移动钟针，更新文字。

HOWEVER ，我的目标是拥有最少量的SVG（以及JS解决方法）并将其替换为干净/漂亮的html和css（如果可能的话）。

提前感谢大家。

最终答案： （到目前为止，仍然欢迎其他建议！）

正如Rob Barber和Roberto S.建议的那样（以及经过几次尝试和错误后我的自我），添加位置：相对于父div（ graphicsPanel ）并制作文本div（< em> .displayValues ），绝对定位（相对于其父级）将获得理想的结果。

{{1}}

Answer 1

.displayValues上的位置将针对具有非静态位置的第一个祖先节点。如果没有定义，它将上升到窗口并靠着视口而不是你试图居中的SVG。添加一个位置：相对于.graphicsPanel，会将.displayValues放在它而不是窗口上。

CSS中心文本（水平和垂直）在DIV块内的另一个元素上

1 个答案: