html - 如何使用 CSS 将文本放在圆心上

Question

我是 HTML 的新手，我使用 border-radius 创建了一个圆圈，并在其中放入了一些文本。文本显示在框的下部，它也出现在圆圈之后。我想把文字放在圆圈里。请检查并指导我。

<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>

风格

    #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;


    }   

Answer 1

行高等于 div/li 的高度也有效 - FIDDLE

这适用于短线，对于长线，您必须使用提到的另一种技术。fiddle中最上面的圆是一个div中的一个div改成了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;
}