带有边框半径的子容器不具有父高度

Question

我有一个fiddle，它试图将绝对定位的圆放置在父级的中心。我必须以某种方式在子级中增加一个填充像素，以覆盖父容器的高度。

有没有办法避免这种多余的像素。

padding: ($padding + 1); /*need to avoid this addition of 1 pixel*/

任何其他建议都是最欢迎的！

Answer 1

问题是由您在.buttonContainer类中定义的字体大小引起的，该字体大小将在内容周围添加一些额外的填充。如果将line-height设置为“ 24px”，则可以删除this fiddle中可以看到的额外像素（实际上，您需要2px才能具有相同的高度）。

这是您更改的代码：

.buttonContainer {
  /* ... */
  line-height: 24px;
  /* ... */
}

.buttonCounter {
  /* ... */
  padding: ($padding);
  /* ... */
}