极客观点
项目管理
HarmonyOS
想做一个右侧固定位置的有三个按钮的工具栏，但是图标一直偏上方，无法垂直居中，请问问题出在哪里？
简化后的html代码如下
<html>
<head>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="resource/css/default.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<div class="container index">
<div class="row">
<div class="col-md-2 left"></div>
<div class="col-md-7 middle"></div>
<div class="col-md-3 right"></div>
</div>
</div>
<div class="side-tool">
<a href="#" class="go-top" style="display:inline-block;"><i class="fa fa-arrow-up"></i></a>
<a href="#" class="qr-code"><i class="fa fa-qrcode" aria-hidden="true"></i></a>
<a href="#" class="favor-site"><i class="fa fa-star" aria-hidden="true"></i></a>
</div>
</body>
</html>
简化后的CSS如下
.navbar-default{
background: #0099cc;
border-bottom: 1px solid #cccccc;
}
.side-tool{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
text-align: center;
font-size: 24px;
z-index: 1040;
}
.side-tool a {
text-align: center;
width: 40px;
height: 40px;
display: inline-block;
}
.side-tool a i {
vertical-align: middle;
}效果总是如下图所示：
