Question

我在html中设置了以下字体：

<div id="centerLeft"><span style="font-family: "myFont", Arial; font-size: 200%;">Z</span></div>

我需要找出这个字母Z的确切像素宽度和高度，以便将这个字母放在浏览器中的正确位置（从浏览器中心稍微偏离左侧）。

我的centerLeft div是：

#centerLeft {
  position: fixed;
  top: 47.4%;
  left: 53.5%;
  margin-top: -?px; NEED!
  margin-left: -?px; NEED!
}

有关如何获得尺寸的任何想法吗？

另一种选择！：

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

但是我不明白如何操纵它以使其保持在浏览器中所需的位置...它没有正确地使用浏览器窗口缩放（不是保持在居中到左侧的位置）。我尝试将左侧改为48％并翻译（-52％......等等但没有骰子。

感谢。

Answer 1

使用jQuery .outerHeight（）它将返回元素的外部高度

获取精确值删除所有填充和元素边距

Answer 2

可能通过在CSS中定义所有位置属性：

#letter
{
  position: absolute;
  left: 40%;
   top: 50%;
    bottom: 50%;
   right: 60%;

}