html - display: inline-block wont center in bootstrap -
i'm trying fit content box length of text, while centering them under images. 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 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 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
add text-center class parent element in case col-md-4
you try text center within element not centered nor of full width.
Comments
Post a Comment