'How to center span (Material icon) in div correctly? [duplicate]

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) enter image description here enter image description here 

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


Solution 1:[1]

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>

Solution 2:[2]

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

.right_panel {
    margin: auto;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DharmanBot
Solution 2 pa4080

Related Questions