在运行文本下放置角度心形CSS对象的问题

Question

我尝试完成以下任务：

• 将图案加载为背景图像。
• 具有角度形状的心脏，在页面顶部具有低不透明度，以响应性为中心。
• 文本块应该流过backgroundimage和heart。

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

的问题：

• 保证金：0自动无法使心脏居中。我认为边距是指心脏选择器的宽度，它是心脏宽度的一半：选择器之后。有没有办法让它正确居中？

• 即使将视口设置为：@viewport {，即使在心脏中设置了大小值，心脏也不会按比例缩小     宽度：设备宽度;     缩放：1;  }

缺陷：

• 包装div（.pack）是绝对必要的，还是有更少元素的更优雅方式？

• 是否有一种更优雅的方式来构建心脏（但角度设计是故意的;））或者前后解决方案是否正常？

谢谢Ralf

Answer 1

这两个中的一个应该有助于居中。

#heart {
    display: block;
}

或

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