Round link with centered text (vertically and horizontally) and active area only the circle, not a square shape

Question

enter image description here

Hi, Please see the above picture.

I need a link, in the shape of a circle: - The whole circle should be the active area of the link - Corners of the square 'behind' the circle should not be active - Must allow for multiple lines of text in the circle

Note: I can do this fairly easily with table-cell but I need the active area to be only the circle. I dont want the user to be able to hover over the corner of the square behind the circle and click the link.

Thanks

Fiddle here: http://jsfiddle.net/4178z93u/ - you can see when hover over the 'corners' of the circle it is also active. — user1525612, May 14 '15 at 08:24
What browser are you testing in? The newer browsers dont treat the click-able area as a square. — Andrew, May 14 '15 at 08:30
What version of Firefox? You should also test in chrome and IE. — Andrew, May 14 '15 at 08:37

score 1 · Answer 1 · edited May 23 '17 at 10:24

You could use border-radius with a fairly big radius. Check this fiddle:

a {
    display: inline-block;
    border-radius: 80px;
    height: 80px;
    width: 80px;
    background: red;
    padding-top: 25px;
    text-align: center;
    box-sizing: border-box;
}

As to how to center the text in the button: with just one line of text you could simply set the line-height of the button to equal its height. But that won't work with multiple lines of text obviously. Check out this fiddle from this SO answer, it might help you out.

Alexander Dayan · Answer 2 · 2015-05-14T08:58:58.550

See the following sample. Note the line-height: 160px; - this trick aligns the text vertically.

.circle-link{
  display: inline-flex;
  width: 160px;
  height: 160px;
  background-color: green;
  color: white;
  border: solid 1px darkgreen;
  border-radius: 80px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  align-items: center;
  justify-content: center;
}

<a href='#' class='circle-link'>Multiline<br />cyrcle link</a>

UPDATE:

If you need to center text with multiple lines (or even a text with images), the most reliable method is using of flexible model. Instead of 'display: block' or 'inline-block' set display: flex; or display: inline-flex; and then align-items: center; and justify-content: center;

For more information about vertical centering methods see the article Vertical centering of elements in HTML

I need this to work for multiple lines of text, i think this will only work when there is one line of text only — user1525612, May 14 '15 at 08:37

Round link with centered text (vertically and horizontally) and active area only the circle, not a square shape

2 Answers2