Centering an icon on top of an element's border

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?

score 7 · Accepted Answer · answered Mar 25 '15 at 16:12

7

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

answered Mar 25 '15 at 16:12

Tony Barnes

2,625
1
18
29

1

plus one, but your main point is setting right and left to zero, not margin:0 auto; – A.B Mar 25 '15 at 16:17

potashin · Answer 2 · 2015-03-25T16:19:18.270

1

You can use calc in the .landing-section2 .landing-icon class :

left: calc(50% - 32px);

JSFiddle

edited Mar 25 '15 at 16:19

answered Mar 25 '15 at 16:10

potashin

44,205
11
83
107

2

Bear in in mind [calcs limited support on old IE browsers and android browser](http://caniuse.com/#feat=calc)...oh, and opera if anyone is still using that... – Liam Mar 25 '15 at 16:13
It seems like that just pushes the icon to the right by 60 pixels, so it gets even further out of line when the window is resized. – Nick S. Mar 25 '15 at 16:17
@NickS. : There could be arithmetic flaws with `n` `px` to be subtracted, but you get the idea. – potashin Mar 25 '15 at 16:21

score 1 · Answer 3 · answered Mar 25 '15 at 16:21

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

score 0 · Answer 4 · answered Mar 25 '15 at 16:23

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/

score 0 · Answer 5 · answered Mar 25 '15 at 16:27

0

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

also, it moves dynamically.

answered Mar 25 '15 at 16:27

Chase Choi

882
11
25

score 0 · Answer 6 · answered Mar 25 '15 at 16:41

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>

Centering an icon on top of an element's border

6 Answers6

Linked