为什么我的字体真棒图标无法居中？

Question

我正在尝试居中字体真棒图标，并且它可以工作。 唯一的问题是，当我将字体大小设置为24以上时，图标向右移动而不是居中。 任何帮助表示赞赏。 另外，由于某种原因，JSFiddle没有显示Font Awesome，对此感到抱歉。

JSFiddle： https ：//jsfiddle.net/598jgszk/

<head>
    <!--Default Stuff-->
    <meta charset="utf-8">

    <title>HighAbyss</title>

    <!--Script Links-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="js/script.js"></script>

    <!--Stylesheet Links-->
    <link rel="stylesheet" text="text/css" href="css/style.css">

    <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">

    <!--Font Links-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
    <!--Website Sidebar-->
    <div id="sidebar">
        <ul>
            <li><a href="#"><i class="fa fa-area-chart"></i></a></li>
            <li><a href="#"><i class="fa fa-life-ring"></i></a></li>
            <li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
            <li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
            <li><a href="#"><i class="fa fa-users"></i></a></li>
        </ul>
    </div>
</body>

/* Default Stuff */
* {
    margin:0px;
    padding:0px;
    text-decoration:none;
    list-style:none;
    font-family:"Open Sans", sans-serif;
}

/* Sidebar Menu */
#sidebar {
    background:rgb(41,41,41);
    width:60px;
    height:100%;
    position:absolute;
    text-align:center;
    line-height:60px;
    left:0px;
    top:0px;
}

ul {
    margin:0px;
    padding:0px;
}

ul li {
    list-style:none;
    height:60px;
    border-bottom:2px solid #111;
}

ul li a {
    color:white;
    padding:19px;
    font-size:30px;
}

Answer 1

发生这种情况是因为给a标签赋予了padding 。 当您增加字体大小时，图标保持在a中心，但是a标签从li流出，并且好像不在中心。

只需在代码中编辑此填充，然后将其设置为零即可。 也使用display:block; 并将宽度和高度定义为100%将使a填充整个li ，并且整个li将是可单击的

ul li a {
    color:white;
    padding:0;
    font-size:30px;
    display:block;
    width:100%;
    height:100%;
}

这是一个小玩意儿 ，下面是工作代码：

 /* Default Stuff */ * { margin:0px; padding:0px; text-decoration:none; list-style:none; font-family:"Open Sans", sans-serif; } /* Sidebar Menu */ #sidebar { background:rgb(41,41,41); width:60px; height:100%; position:absolute; text-align:center; line-height:60px; left:0px; top:0px; } ul { margin:0px; padding:0px; } ul li { list-style:none; height:60px; border-bottom:2px solid #111; } ul li a { color:white; padding:0; font-size:30px; display:block; width:100%; height:100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <title>HighAbyss</title> <!--Script Links--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/script.js"></script> <!--Stylesheet Links--> <link rel="stylesheet" text="text/css" href="css/style.css"> <link rel="stylesheet" text="text/css" href="css/font-awesome.min.css"> <!--Font Links--> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <!--Website Sidebar--> <div id="sidebar"> <ul> <li><a href="#"><i class="fa fa-area-chart"></i></a></li> <li><a href="#"><i class="fa fa-life-ring"></i></a></li> <li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li> <li><a href="#"><i class="fa fa-shopping-basket"></i></a></li> <li><a href="#"><i class="fa fa-users"></i></a></li> </ul> </div> </body> 

Answer 2

您可以使用中心标签。

<center><p>This text is in center</p>
 </center>