将图标居中放置在元素边框的顶部

Question

我正在尝试在元素的边框上叠加一个图标。我当前的解决方案涉及绝对定位。我可以通过使用 left: 40% 之类的东西来破解它以使其尽可能靠近中心，但是一旦我调整 window 的大小，它就会移出中心。

这是一个 JSFiddle，展示了我到目前为止所获得的内容。您会看到，如果您调整 window 的大小，图标会移出中心。 https://jsfiddle.net/83on2jr9/

有更简单的方法吗？

Answer 1

您可以在 .landing-section2 .landing-icon class 中使用 calc :

left: calc(50% - 32px);

JSFiddle

Answer 2

您可以将 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

Answer 3

使用CSS 转换。这是响应式的，适用于任何大小的元素，不需要任何幻数的宽度和边距。

.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    background: #2c2c2c;
    z-index: 1000;
    position: absolute;
    padding-left: 10px;
    padding-right: 10px;
    left: 50%;
    top: 0;
    transform:translate(-50%,-50%); 
}

JSfiddle Demo

支持 IE9 及更高版本CanIUse.com

Answer 4

我发现在使用绝对定位时，它更容易使用，因为它包含在我在下面更新的 JSFiddle 中。基本上，我将 "icon" 包裹在一个跨度中并获得更大的控制权。

.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    z-index: 1000;
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    text-align: center;
}
.landing-icon span {
    display: inline-block;
    padding: 8px;
    background: #2c2c2c;

}

这是更新后的 Fiddle 和工作代码：https://jsfiddle.net/83on2jr9/7/

Answer 5

我认为，放置 'margin-left: -32px' 是无需更改许多其他选项即可将其移至中心的简单方法。

此外，它会动态移动。

Answer 6

你也可以在没有位置的情况下使用显示和保证金:) https://jsfiddle.net/83on2jr9/10/

.landing-section2 {
    padding: 50px;
    background-color: #2c2c2c;
    text-align: center;
}
.landing-section2 .col-sm-4 > div {
    border: 1px solid #357ca3;
    padding: 20px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:2em;
}
.landing-section2 h3 {
    color: white;
    margin-top: 30px;
}
.landing-section2 p {
    color: #ccc;
}
.landing-section2 .landing-icon {
    color: #357ca3;
    font-size: 3em;
    background: #2c2c2c;
    display:table;
    margin:-1em auto 0;
    padding:0 5px;
}

<div class='landing-section2'>
    <div class='container'>
        <div class='row'>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                     <h3>
      Section 1
     </h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                     <h3>
      Section 2
     </h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
            <div class='col-sm-4 landing-section2-pillar'>
                <div>
                    <div class='landing-icon'>@</div>
                     <h3>
      Section 3
     </h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nunc nulla, fringilla et auctor et, congue sit amet nibh. Aenean vel est ante. Suspendisse quis tortor laoreet ligula vehicula commodo. Morbi suscipit, neque id vulputate mollis, orci sapien aliquam sem, ac laoreet ex nisi id leo.</p>
                </div>
            </div>
        </div>
    </div>
</div>

将图标居中放置在元素边框的顶部

Centering an icon on top of an element's border

html

css

css-position