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

我想中心字体真棒图标，它的工作原理。唯一的问题是，当我将字体大小设置为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; 
}

来源

2017-01-08 Abyssal

在JS提琴相对路径是基于网站：jsfiddle.net/css/font-awesome.min.css –

这是因为给予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%; 
}

这里有一个fiddle和下面的工作代码：

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

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

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

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

 
ul li a { 
 
\t color:white; 
 
\t padding:0; 
 
\t 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> 
 

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

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

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

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

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

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

来源

2017-01-08 03:26:05 ab29007

确定，但唯一的问题是我想保持填充，所以我可以点击整个广场，它仍然会将我重定向到一个链接。有没有其他方法可以使整个方块可点击并直接与没有填充的图标相同的地方？ – Abyssal

好吧，给我2分钟，我会更新我的代码 – ab29007

好吧，我更新了我的答案，并且只更改了'a'标记的CSS。如果能解决您的问题，请不要忘记接受答案。 – ab29007

您可以使用中心标签。

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

来源

2017-01-08 03:27:21

中心标签是不是已过时？而且中心标签也和我下面评论的一样。 – Abyssal

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

回答

相关问题