display: inline-block wont center in bootstrap - html

Question

I'm trying to fit the content box to the length of the text, while also centering them under my images. I am using bootstrap grid system.
HTML
<div class="row textbackground">
<div class="col-md-4">
<img class="imgsize img-fluid" src="math.jpg" alt="student">
<p class="subtext text-center" >Student by Day</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="coder.jpeg" alt="web design">
<p class="subtext text-center" >Evening Web Developer</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="rockstar.jpg" alt="rockstar">
<p class="subtext">Rockstar by Night</p>
</div>
</div>
CSS
.imgsize{
height: 250px;
width: auto;
border-style: solid;
border-width: 10px;
border-radius: 50%;
border-color: #111111;
display: block;
margin:0 auto;
}
.subtext{
padding-top: 20px;
background-color: #6c757d;
display: inline-block;
text-align: center;
}
Result
This is what I end up with

Answer 1

Add text-center class to parent element in your case col-md-4
You try to text the center within the element which itself is not centered nor it is of a full width.

Answer 2

.imgsize{
height: 250px;
width: auto;
border-style: solid;
border-width: 10px;
border-radius: 50%;
border-color: #111111;
display: block;
margin:0 auto;
}
.subtext{
padding-top: 20px;
background-color: #6c757d;
display: inline-block;
text-align: center;
}
.col-md-4{
text-align:center;
}
<div class="row textbackground">
<div class="col-md-4">
<img class="imgsize img-fluid" src="math.jpg" alt="student">
<p class="subtext text-center" >Student by Day</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="coder.jpeg" alt="web design">
<p class="subtext text-center" >Evening Web Developer</p>
</div>
<div class="col-md-4">
<img class="imgsize img-fluid" src="rockstar.jpg" alt="rockstar">
<p class="subtext">Rockstar by Night</p>
</div>
</div>
add text-align and make it center as showen in the snippet.