Hi all -

I keep having this issue come up and have always found a different, kludgey way to accomplish this, so I'm looking for some definitive help.

I need to center a link that has a background icon on it.

Using text-align:center; on the containing DIV, if I leave the link as display:inline;, the background icon gets clipped. If I make the link display:block;, the icon stays all the way to the left (because width is 100%) and the link text is centered.

Here is my code so far:

CSS -

p.add-new { border:1px dashed #d7cfbe; text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:7px; }

p.add-new a { display:block; line-height:20px; font-weight:bold; color:#aca492; background:url(/images/icon-add-new.png) no-repeat 0 0; }

HTML -

<p class="add-new"><a href="#">Add New Team</a></p>

At this stage of the project, I'm primarily using Firefox 3.6 on a mac for development.

Any and all help is greatly appreciated! Thanks!

Edit -- This is the desired outcome

alt text

  • Do you have a working example or a design mockup that you could share? I'm having a hard time visualizing exactly what the end result is supposed to look like. Michael Martin-Smucker over 6 years ago

3 answers

danwellman 5600
1
point
This was chosen as the best answer

Just set the link to display:inline-block and add some left-padding to the link. That prevents vertical clipping on the icon without having to set specific padding on the top/bottom (regardless of the font-size) and gives the icon room on the left. It remains centered regardless of the length of the text.

Answered over 6 years ago by danwellman
resting 25
0
points

use background:url(/images/icon-add-new.png) no-repeat center center; instead

Answered over 6 years ago by resting
  • This centers both the icon and the link text - not what I'm looking for. webcodeslinger over 6 years ago
0
points

Dan's answer is great, but because I neglected to mention that I need the entire width to be clickable, it brings me back to square one.

So, I ended up removing the surrounding P and placing a SPAN inside the link - put the background icon on the SPAN and text-align:center on the link. Now the entire area is clickable.

However, using extra elements like this makes me unhappy.

Answered over 6 years ago by webcodeslinger