使用媒体查询引导程序将列居中

Question

我正在尝试进行响应式网页设计，特别是在屏幕尺寸为 576px 时将列容器内的图像居中。我已经尝试过我在其他地方看到的这个声明：

@media(max-width: 576px)
{
.first-pic-container {
    float: none;
    margin: 0 auto;

}

但它并没有多大作用。我也尝试过使用 Bootstrap 的offset类，但这也没有任何作用。

这是相关的 HTML：

<div class="col-sm-4 first-pic-container">
    <img class="first-step" src="step1image.png" alt="firstpic">
                <div class= "row">
                    <div class="col-sm-12 col-md-12 col-lg-10 first-p-container">
     <p class="step-one-p"> Enter the classes you are looking to take for next semester! </p>
                    </div>
                </div>
            </div>

以及用于视觉参考的代码笔。我在firstpic和周围添加了边框first-pic-container，我试图将其居中： https: //codepen.io/gkunthara/pen/VWdrYj

Answer 1

送给text-align: center​ first-pic-container

@media(max-width: 576px) {
        .first-pic-container {
            text-align: center;
        }
    }