html - 使用媒体查询 Bootstrap 使列居中

Question

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

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

以及用于视觉引用的codepen。我在试图居中的 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;
        }
    }