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

Why Are My Font Awesome Icons Not Centering?

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<head>

<meta charset="utf-8">

HighAbyss


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

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


<link rel="stylesheet" text="text/css" href="css/style.css">

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


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

<body>


<ul>

<li>
<i class="fa fa-area-chart">
</li>

<li>
<i class="fa fa-life-ring">
</li>

<li>
<i class="fa fa-cart-arrow-down">
</li>

<li>
<i class="fa fa-shopping-basket">
</li>

<li>
<i class="fa fa-users">
</li>

</ul>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/* 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将是可单击的

1
2
3
4
5
6
7
8

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

这是一个小提琴，下面是工作代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/* Default Stuff */
* {
\tmargin:0px;
\tpadding:0px;
\ttext-decoration:none;
\tlist-style:none;
\tfont-family:"Open Sans", sans-serif;
}

/* Sidebar Menu */
#sidebar {
\tbackground:rgb(41,41,41);
\twidth:60px;
\theight:100%;
\tposition:absolute;
\ttext-align:center;
\tline-height:60px;
\tleft:0px;
\ttop:0px;
}

ul {
\tmargin:0px;
\tpadding:0px;
}

ul li {
\tlist-style:none;
\theight:60px;
\tborder-bottom:2px solid #111;
}

ul li a {
\tcolor:white;
\tpadding:0;
\tfont-size:30px;
display:block;
width:100%;
height:100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53