display：inline-block不会在bootstrap中居中

Question

我正在尝试将内容框与文本的长度相匹配，同时也将它们置于我的图像下方。我正在使用bootstrap网格系统。

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;
}

结果

This is what I end up with

Answer 1

在案例col-md-4中将text-center类添加到parent元素  

您尝试在元素内部文本中心，该元素本身不居中，也不是全宽。

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

添加text-align并使其在代码段中显示为中心。