Question

我在我的div中间修复图标时遇到了问题。我只是想知道如何修复div折叠菜单触发器中的材料图标icon-def。谢谢你回答我。在jsfiddle它工作，但不在我的浏览器中。 https://jsfiddle.net/4goLq4q4/1/

＆＃13;

<div id="navbar">
  <div class="collapse-menu-trigger">
    <i class="material-icons icon-def">keyboard_arrow_right</i>
    <i class="material-icons icon-inuse">keyboard_arrow_left</i>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 1

这就是你想要的：

#navbar {
  background: rgb(16, 16, 16);
  color: white;
  width: 70px;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  border-right: rgb(246, 246, 255) 1px solid;
}

.collapse-menu-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  bottom: 0;
  cursor: pointer;
}

.collapse-menu-trigger .material-icons {
  vertical-align: middle;
}

.collapse-menu-trigger .material-icons.icon-def {}

<head>
  <link rel="stylesheet" href="./styles/style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div id="navbar">
    <div class="collapse-menu-trigger">
      <i class="material-icons icon-def">keyboard_arrow_right</i>
    </div>
  </div>
</body>

CSS：div中的中心图标

1 个答案: