Centering an icon on top of an element's border - html

Question

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?

Answer 1

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

Answer 2

You can use calc in the .landing-section2 .landing-icon class :
left: calc(50% - 32px);
JSFiddle

Answer 3

Use a CSS transform. This is responsive and works for any size element and doesn't require any magic number for widths and margins.
.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
Support is IE9 and up CanIUse.com

Answer 4

I find that when using absolute positioning, it's easier to use it as included in the JSFiddle I updated below. Basically, I wrap the "icon" in a span and attain much greater control.
.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;
}
Here is the updated Fiddle with working code: https://jsfiddle.net/83on2jr9/7/

Answer 5

I think, put 'margin-left: -32px' is easy way to move it to center without changing many other options.
also, it moves dynamically.

Answer 6

you can use display and margin too without position :) 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>