Jump to content

How to circle an anchor text


newcoder1010

Recommended Posts

Hello,

HTML:

<p class="text-center media"><a href="https://www.facebook.com">f</a>   <a href="https://www.twitter.com"> t</a></p>

CSS:

.media a {
    padding: 0;
    /* margin-bottom: 40px; */
    /* border-radius: 40px; */
    height: 40px;
    width: 40px;
    color: white;
    font-size: 20px;
    padding: 10px;
    background: blue;
    line-height: 40px;
}

a:hover{background:red;}

I like to circle anchor text with blue background. On hover, I like to have red background. Instead of circle, I am getting rectangle background.

Please advise!

Link to comment
Share on other sites

I explain using example.

<body>
    <a href="#" class="circle">f</a>
</body>

And css will :

    .circle {
        border-radius: 100%; 
        padding : 5px;
        background: blue;
        display:inline-block;
        line-height:10px;
        color : white;
        text-decoration : none;            
    }

use line-height instead of height.

See output on http://jsfiddle.net/tydj79vp/

I hope it will help you.

Thanks!

 

Link to comment
Share on other sites

Because as i mentioned, it has no width so its width is determined by content.

The only thing he got right was display: inline-block. This property allows you set height and width.

Add this to your original code, with the border-radius: it should be 50%, to center it horizontally use text-align: center; i would use 1em for height, width, and line-height: then it will automatically adjust to font-size:

Link to comment
Share on other sites

This worked better except for the padding. I like to put padding around the font. When I put padding, it does not pad properly around the font.

.media a {
    height: 1em;
    width: 1em;
    color: white;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    /* padding: 10px; */
    background: blue;
    line-height: 1em;
    display: inline-block;
}

 

Edited by newcoder1010
Link to comment
Share on other sites

Heres an idea, i'll just put it out there, maybe if you know, increase height, width, line-height equally 1.1em, 1.2em so on, until the "padding" looks reasonable correct, that might work! The example i gave is  not set in stone, you are allowed to adjust to your needs.

Link to comment
Share on other sites

IF the font-size: is correct, and the circle at 1.3em is correct, then the padding is wrong, i don't know why padding is required? Because works to the same principle font-size correct, width height of circle correct, its centred vertically and horizontally because of text-align and line-height, so padding is not required, saying you require padding does not make sense! If you still want padding because it will make you sleep better at night ADJUST THE PADDING, because it must be the only property breaking it if font-size, height and width are correct. Unless you have changed the goal posts and is no longer to original requirements.

Also letters are NOT square, you require a lesser padding at top, so enjoying figuring that sizing.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...