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

Answer 2

您可以在calc课程中使用.landing-section2 .landing-icon：

left: calc(50% - 32px);

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中包含它。基本上，我在一个跨度中包裹“图标”并获得更大的控制。

.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;

}

以下是更新后的工具代码：https://jsfiddle.net/83on2jr9/7/

Answer 5

我认为，'margin-left：-32px'是将其移动到中心的简单方法，而不会改变许多其他选项。

另外，它会动态移动。

Answer 6

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

6 个答案: