CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jordan Hensley
Jordan Hensley

Reputation: 440

display: inline-block wont center in bootstrap

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

Upvotes: 4

Views: 5214

Answers (2)

user8492413
user8492413

Reputation: 

.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.

Upvotes: -1

Findegil
Findegil

Reputation: 82

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.

Upvotes: 2

Related Questions