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

Question

我是HTML的新手，我使用border-radius制作了圆圈，并在其中添加了一些文字。文本显示在Box的下半部分，它也出现在圆圈后面。我想把文字放在圆圈里。 请检查并指导我。

<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

这适用于短线，对于长线，你必须使用上面提到的另一种技术。 小提琴中的顶部圆圈是div中的div，更改为内联块

CSS

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

Answer 2

这是css做得不好的事情之一。但是有一个解决方案，这是一个很好的article by Chris Coyier帮我解决了这个问题。

Answer 3

您可以将vertical-align属性添加到文本类。

vertical-align: middle;

此外，如果这不起作用，请尝试手动放置在中间位置，边距为margin /和margin-top。

margin-bottom: 10px;

你的#navText是一个id。使用div id =＆＃34; navText＆＃34;而不是class =＆＃34; navText＆＃34;