Question

我想将图标字体<span>标记与行中的文字<span>对齐。似乎两个<span>排成一行，但图标是某种方式＆＃34;浮动＆＃34;超过div。

＆＃13;

.navigation {
  padding-left: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.navigation .counter {
  background: red;
  vertical-align: middle;
  font-size: 13px;
}
.navigation span {
  background: green;
  padding-bottom: 0px;
}
.navigation .material-icons {
  font-size: 21px;
}

＆＃13;

<head>
  <meta charset="utf-8" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<div class="navigation">
  <span><i class="material-icons">arrow_drop_down</i></span>
  <span><i class="material-icons">arrow_drop_up</i></span>
  <span class="counter">select floor</span>
</div>

＆＃13;

那么如何对齐图标和文本以使文本位于图标的垂直中心？

Answer 1

文本的line-height必须与图标的font-size相同。不一定以这种方式使用vertical-align:middle;。

.navigation {
  padding-left: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.navigation .counter {
  background: red;
  font-size: 13px;
  line-height:21px;
  vertical-align:top;
}
.navigation span {
  background: green;
  padding-bottom: 0px;
  display: inline-block;
}
.navigation .material-icons {
  font-size: 21px;
  vertical-align:top;
}

<head>
  <meta charset="utf-8" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<div class="navigation">
  <span><i class="material-icons">arrow_drop_down</i></span>
  <span><i class="material-icons">arrow_drop_up</i></span>
  <span class="counter">select floor</span>
</div>

Answer 2

请使用vertical-align和display属性更新以下课程：

<强> CSS

     .navigation {
          padding-left: 50px;
          padding-top: 50px;
          padding-bottom: 50px;
          display: inline-block;
        }

      navigation .material-icons {
          font-size: 21px;
          vertical-align: middle;
        }

Answer 3

只需添加 verical-align：middle到.navigation .material-icons 即可解决问题。

＆＃13;

.navigation {
  padding-left: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.navigation .counter {
  background: red;
  vertical-align: middle;
  font-size: 13px;
}
.navigation span {
  background: green;
  padding-bottom: 0px;
}
.navigation .material-icons {
  font-size: 21px;
 vertical-align: middle;
}

＆＃13;

<head>
  <meta charset="utf-8" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<div class="navigation">
  <span><i class="material-icons">arrow_drop_down</i></span>
  <span><i class="material-icons">arrow_drop_up</i></span>
  <span class="counter">select floor</span>
</div>

＆＃13;

将图标字体跨度与文本跨度对齐

3 个答案: