CSS: center icon in div [duplicate]

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
– patelarpan, Commented Apr 30, 2018 at 18:46

Adam · Accepted Answer · 2018-04-30 19:00:02Z

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>

Collectives™ on Stack Overflow

CSS: center icon in div [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related