我正在尝试将 Font Awesome 图标居中并且它有效。唯一的问题是，当我将字体大小设置为超过 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;
}
最佳答案
发生这种情况是因为 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 */
* {
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>关于html - 为什么我的 Font Awesome 图标不居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41529137/