css - 在运行文本下放置一个 Angular 形心形 CSS 对象以响应为中心的问题

Question

我尝试完成以下操作:

• 载入一个图案作为背景图片。
• 在页面顶部居中有一个低不透明度的 Angular 形心形，表现出响应性。
• 文本 block 应该覆盖背景图像和中心。

我已经构建了一些东西:http://codepen.io/rpkoller/pen/aIkDH - 但还剩下一两个问题:

问题:

• margin: 0 auto 无法使心脏居中。我想 margin 是指 heart 选择器的宽度，它是 heart:after 选择器宽度的一半。有没有办法让它正确居中？

• 即使在 em 中设置了大小值，即使视口(viewport)设置为:@viewport{ 宽度:设备宽度； 缩放:1；

缺陷:

• 包装 div (.pack) 是绝对必要的还是有更优雅的方式使用更少的元素？

• 是否有更优雅的方式来构建心脏(但 Angular 设计是故意的 ;))或者之前和之后的解决方案是否可以？

谢谢拉尔夫

Answer 1

这两者之一应该有助于居中。

#heart {
    display: block;
}

或

#heart {
    display: inline-block;
    text-align: center;
    }