17661

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. <a href="https://jsfiddle.net/83on2jr9/" rel="nofollow">https://jsfiddle.net/83on2jr9/</a>

Is there an easier approach to this?

Answer1:

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

<a href="https://jsfiddle.net/2vm9wqwe/1/" rel="nofollow">JSFiddle</a>

Answer2:

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

left: calc(50% - 32px);

<a href="https://jsfiddle.net/83on2jr9/6/" rel="nofollow"><strong>JSFiddle</strong></a>

Answer3:

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%); }

<a href="https://jsfiddle.net/83on2jr9/8/" rel="nofollow"><strong>JSfiddle Demo</strong></a>

Support is IE9 and up <a href="http://caniuse.com/#feat=transforms2d" rel="nofollow"><strong>CanIUse.com</strong></a>

Answer4:

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: <a href="https://jsfiddle.net/83on2jr9/7/" rel="nofollow">https://jsfiddle.net/83on2jr9/7/</a>

Answer5:

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

also, it moves dynamically.

Answer6:

you can use display and margin too without position :) <a href="https://jsfiddle.net/83on2jr9/10/" rel="nofollow">https://jsfiddle.net/83on2jr9/10/</a>

<pre class="snippet-code-css lang-css prettyprint-override">.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; } <pre class="snippet-code-html lang-html prettyprint-override"><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>

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.

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

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.

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

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.

</div> </div> </div> </div> </div>

Recommend

  • Phantomjs browser incorrectly computing css calc() function in Nightwatch tests
  • Gutter between DIVs using negative margin breaks
  • Google Chart HTML Tooltip displays html text
  • html table with vertical scroll inside tbody
  • Moment.js plugins in Ionic2/Cordova typescript project
  • How do determine gutter-width in the sass version of zurbs foundation
  • Sign extending from a constant bit width in C#
  • How to get a stack trace for “Invalid chrome URI” exceptions?
  • dompdf: white margin on A4 page
  • Make line chart with values and dates
  • spawn random images in canvas in javascript
  • Find and copy code
  • Attaching a fixed, transparent, header to a ListView?
  • Remove parenthesis and text in a file using Python
  • Process SOAP Headers in PHP
  • PE file - what's missing?
  • Update two sets of radiobuttons - shiny
  • Passing a Scala type to a function
  • Pass nested C++ vector as built-in style multi-dimensional array
  • Nested not working on slide
  • data.table replicate rows after join?
  • How to remove left and right margins from all wrapped rows in flexbox (without nth-child or js)
  • Ruby: FileUtils.cp truncates file; FileUtils.mv it does not?
  • rspec simple example getting error on request variable in integration test
  • How to attach a node.js readable stream to a Sendgrid email?
  • Exception “firebase.functions() takes … no argument …” when specifying a region for a Cloud Function
  • Change multiple background-images with jQuery
  • Is there a javascript serializer for JSON.Net?
  • Android screen density dpi vs ppi
  • Spray.io: When (not) to use non-blocking route handling?
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Where to put my custom functions in Wordpress?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Unanticipated behavior
  • Buffer size for converting unsigned long to string
  • Android Google Maps API OnLocationChanged only called once
  • Binding checkboxes to object values in AngularJs