Question

我正在尝试将Font Awesome图标居中并且它有效。唯一的问题是，当我将字体大小设置为超过24时，图标会向右移动而不是居中。任何帮助表示赞赏。另外，由于某些原因，JSFiddle没有显示Font Awesome，对不起。

<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

由于padding标记的a，这种情况正在发生。当您增加字体大小时，图标会保持居中于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，以下是工作代码：

＆＃13;

/* 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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用中心标记。

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

为什么我的字体令人敬畏的图标不居中？

2 个答案: