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

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

body {
    margin: 0;
}

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

    box-sizing: border-box;

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

.title {
    font-size: 24px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
</head>
<body>
<header>
    <div >Shop</div>
    <div >
        <div >
            <span >
                account_circle
            </span>
        </div>
    </div>
</header>
</body>
</html>

CodePudding user response：

You can add an empty <div></div> after <div title">Shop</div> <div > <div > <span > account_circle </span> </div> </div> <div>  </div> </header>

I hope this will help you

CodePudding user response：

Add align-items: center; in your header CSS.

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}