CODEWITHSUNDEEP
htmlcss
user1525612
user1525612

Reputation: 1994

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

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

Upvotes: 1

Views: 501

Answers (2)

Alexander Dayan
Alexander Dayan

Reputation: 2924

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

Upvotes: 0

Marco Kerwitz
Marco Kerwitz

Reputation: 5494

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.

Upvotes: 1

Related Questions