为什么元素无法在垂直中心对齐 //?

问题描述 投票：1回答：4

我正在尝试在页面的右下角创建一个固定位置的垂直工具栏。使用的图标字体（我使用class =“fa”标记）不是垂直居中对齐父元素（标记）。我一直试图解决这个问题，但没有任何作用。

输出如下，图标始终位于父元素的顶部。 output

.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;
}
<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>
javascript html css
4个回答
2
投票
.side-tool a i {
  vertical-align: middle;
  line-height: 40px;
}
1
投票

除了将vertical-align: middle添加到<i>元素之外，您还需要添加一个等于父母的line-height（height）的40px：

.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;
  line-height: 40px; /* Added */
  display: inline-block;
}

.side-tool a i {
  vertical-align: middle;
}
<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>

这是因为vertical-alignment是基于line-height而不是height。 line-height默认为字体的高度，因此在您的示例中，vertical-alignment: middle仅设置字体的18px的偏移量而不是元素的40px高度。

line-height可以在<i>元素本身或父<a>元素上设置。

0
投票

将锚标签变为弹性框

.side-tool a {
  display: flex;
  justify-content: center;
  align-items: center;
}

将此添加到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 {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<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"><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>
0
投票

几个不同的选项，用于将这些图标集中在他们的a容器中。我其实不介意这里的绝对居中技巧：

添加到.side-tool a：

position: relative;

将以图标为目标的CSS替换为：

.side-tool a i {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

图标应该绝对居中在40x40 a标签内。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.