How to center span (Material icon) in div correctly?

Question

I have div with Material Design icon (span) and I wanna center this icon correctly to fix the gap (see screenshot). What's the way to do that? (I tried text-align on items div, but it doesn't work)

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

header {
    display: flex;
    justify-content: space-between;

    box-sizing: border-box;

    width: 100%;
    padding: 1em;
    background: #3378FF;
    color: white;
}

.right_panel {
    align-items: center;
}

.title {
    font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
    <div class="title">Shop</div>
    <div class="right_panel">
        <span class="material-icons">
            account_circle
        </span>
    </div>
</header>
<div></div>
</body>
</html>

score 2 · Accepted Answer · edited Apr 14 '22 at 19:58

2

You can add an empty <div></div> after <div class="right_panel></div> so flex will set icon in center

<header>
    <div class="title">Shop</div>
    <div class="right_panel">
        <div class="items">
            <span class="material-icons">
                account_circle
            </span>
        </div>
    </div>
    <div>
        <!-- This will stay in right so icon can be in center -->
    </div>
</header>

edited Apr 14 '22 at 19:58

DharmanBot

1,066
2
6
10

answered Apr 14 '22 at 11:23

Afshar Sharifi

152
1
7

I answered question wrong, I wanna center it vertically... – Vladislav Apr 14 '22 at 12:00
Ok you can use align-items="center" as you said – Afshar Sharifi Apr 14 '22 at 12:05
Unfortunately it doesn't work (see updated snippet). – Vladislav Apr 14 '22 at 12:10
did you try align-self: center I tried this and it works – Afshar Sharifi Apr 14 '22 at 12:19
Did you apply it to .right_panel? – Vladislav Apr 14 '22 at 12:22
Yes I apply it to .right_panel – Afshar Sharifi Apr 14 '22 at 12:26
Oh, thanks! I forgot to add display: flex there. – Vladislav Apr 14 '22 at 12:30

score 0 · Answer 2 · answered Apr 14 '22 at 11:38

0

In the current case you can set the left and right margins of div.right_panel to auto or just:

.right_panel {
    margin: auto;
}

answered Apr 14 '22 at 11:38

pa4080

531
9
16

How to center span (Material icon) in div correctly?

2 Answers2