将图标置于元素边框的顶部

Question

我正在尝试在元素的边框上叠加一个图标.我目前的解决方案涉及绝对定位 我可以通过使用像left: 40%我这样的东西来尽可能地靠近中心,但是一旦我调整窗口大小,它就会移出中心.

这是一个JSFiddle,展示了到目前为止我所拥有的东西.您会看到,如果您调整窗口大小,图标会移出中心.https://jsfiddle.net/83on2jr9/

有更简单的方法吗？

Answer 1

你可以使用margin:0 auto;带有position:absolute;-提供你有一些其他的值设置:

.landing-section2 .landing-icon {
  position: absolute;
  top:-16px;
  right:0;
  bottom:0;
  left:0;
  width:50px;
  height:50px;
  margin:0 auto;
}

的jsfiddle