html - 显示 : inline-block wont center in 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

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