CODEWITHSUNDEEP
htmlcss
user3480644
user3480644

Reputation: 577

How to put text on the center of a circle using CSS

I am new to HTML, I have created circle using border-radius and i have put some text in it. the Text is displaying on the lower part of the Box and its also appearing after the circle. I want to put the Text in the circle. Kindly check this and guide me.

<ul>
    <li>HOME</li>
    <li id="skills" class="navText" >Work - Work Experience</li>
    <li id="web" class="navText">Skills </li>
    <li id="video1" class="navText">Web - Web Projects </li>
    <li id="video2" class="navText">Video - Video Projects </li>


</ul>

Style

    #navText
    {
        position:absolute;
        top:-90px;
    }



nav ul
{
    list-style-type:none;
    padding:0;
    margin:20px 0px 0px 130px;

}


nav ul #skills 
{

    position:absolute;


    line-height:-200px;
    background-color:#EA7079;

    display: inline-block;
    border:6px solid;

    border-color:white; 
    border-radius:110px;

    padding: 91px 31px 31px ;   
    width:80;
    height:25;
    text-align:center;

    #margin-left:35px;


    }

enter image description here

Upvotes: 0

Views: 1145

Answers (3)

TimSPQR
TimSPQR

Reputation: 2984

Line-height equal to height of the div/li also works - FIDDLE

This works fine for short lines, for long lines, you'll have to use another technique as mentioned. The top circle in the fiddle is a div in a div changed to inline-block

CSS

.centerofcircle1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    line-height: 100px;
    font-size: 15px;
    background-color: red;
    color: white;
    text-align: center;
}

Upvotes: 2

perte
perte

Reputation: 271

You could add the vertical-align property to your text class. 

vertical-align: middle;

Also, if that doesn't work, try to manually place in the middle with margin-bottom or/and margin-top.

margin-bottom: 10px;

And your #navText is an id. Use div id="navText" instead of class="navText"

Upvotes: 1

ndcweb
ndcweb

Reputation: 725

This is one of the thing that css dosen't do very well. However there is a solution, here is a great article by Chris Coyier that helped me with this problem.

Upvotes: 1

Related Questions