Centering an icon on top of an element's borde

问题:

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?

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

回答2:

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

left: calc(50% - 32px);

JSFiddle

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

回答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/

回答5:

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

also, it moves dynamically.

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