将图标置于元素边框顶部 [英] Centering an icon on top of an element's border

问题描述

我想在元素的边框上方叠加图标。我当前的解决方案涉及绝对定位。我可以通过使用像 left：40％来尽可能地接近中心，但是一旦调整窗口大小，它就会移出中心。 / p>

这里是一个JSFiddle显示我到目前为止。你会看到，如果你调整窗口的大小，图标移出中心。 https://jsfiddle.net/83on2jr9/

您可以使用 margin：0 auto;

code> with position：absolute; - 如果您设置了其他值：

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

JSFiddle

I'm trying to overlay an icon on top of an element's border. My current solution involves absolute positioning. I can hack it to fit as close to center as possible by using something like left: 40% but as soon as I resize the window, it moves out of the center.

Here's a JSFiddle showing what I've got so far. You'll see that if you resize the window, the icon moves out of center. https://jsfiddle.net/83on2jr9/

Is there an easier approach to this?

解决方案

You could use margin:0 auto; with position:absolute; - providing that you have some other values set:

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

JSFiddle

这篇关于将图标置于元素边框顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！