CSS: center icon in div

Question

I'm having issue with fixing icon in the middle of my div. I just want to know how to fix material-icons icon-def in div collapse menu trigger. Thank you for answering me. In jsfiddle it's working, but not in my browser. https://jsfiddle.net/4goLq4q4/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: block;
  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 {}

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

Add display: flex; align-item:center; flex-direction: column; in your collapse-menu-trigger class — patelarpan, Apr 30 '18 at 18:46

score 1 · Accepted Answer · answered Apr 30 '18 at 19:00

Is that what you want:

#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: center icon in div

1 Answers1