Home/Explore/

Initial avatar

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
To center the content, you also can use other technique demonstrated in the Centering pattern.
PN
<div style="
    /* Center the content */
    display: inline-block;
    vertical-align: middle;

    /* Used to position the content */
    position: relative;

    /* Colors */
    background-color: rgba(0, 0, 0, .3);
    color: #FFF;

    /* Rounded border */
    border-radius: 50%;
    height: 48px;
    width: 48px;
">
    <div style="
        /* Center the content */
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    ">
        <!-- The letters -->
        ...
    </div>
</div>

Related patterns

Avatar

1
2
3

Avatar list

1

Badge

Centering

Presence indicator

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!