Circular divs with vertically aligned text and subtitles - html

Question

I feel like this is really obvious but I couldn't seem to find any answers on here.
I'm trying to make 5 circular divs, inline, with a letter in the middle representing a grade. I then want the subject title below the grade (but still inside the circle).
Here's what I've written so far:
HTML:
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div>
CSS:
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
Also, I couldn't seem to horizontally center the circles using:
margin: 0 auto;
or
margin-left: auto;
margin-right: auto;
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
}
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div>
Any advice is appreciated, thanks!

Answer 1

Wrap the div's in a container and add text-align: center to it.
Use pseudo element :after to insert the subtitle. Check below example
.container {
text-align: center;
}
.subject {
border-radius: 100%;
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;
position: relative;
}
.subject:after {
display: inline-block;
position: absolute;
font-size: 16px;
content: attr(data-sub);
left: 50%;
transform: translateX(-50%);
top: 30%;
}
<div class="container">
<div class="subject" data-sub="Maths">A</div>
<div class="subject" data-sub="French">B</div>
<div class="subject" data-sub="Biology">C</div>
<div class="subject" data-sub="German">D</div>
<div class="subject" data-sub="Chemistry">E</div>
</div>

Answer 2

You can do follows, i created another div and added text-align:center property.Now these group of circles are horizontally centered.
.subject {
display: inline-block;
background-color: gray;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-family: Arial;
border-radius: 100%;
color: white;
font-size: 100px;}
.circle{
text-align:center;
}
<div class="circle">
<div class="subject">A</div>
<div class="subject">B</div>
<div class="subject">C</div>
<div class="subject">D</div>
<div class="subject">E</div></div>