Looking for CSS assistance to style the sample image provided below. The letter within the circular element is contained in a div while the subscript Z is represented by an image of a circle.
https://i.sstatic.net/sKF1H.png
.text-center {
text-align: center;
}
*,
::before,
::after {
margin: 0px;
background-repeat: no-repeat;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.img-circle.small-avatar {
background: linear-gradient(rgb(106, 108, 111) 0%, rgb(38, 39, 41) 100%);
height: 40px;
width: 40px;
color: rgb(255, 255, 255);
font-size: 14px;
font-family: arial;
padding: 11px 0px;
margin-top: 5px;
}
.img-circle {
border-radius: 50%;
}<div class="text-center">
<div class="img-circle small-avatar center-block">
<p align="center">D</p>
</div>
</div>