我正在尝试进行响应式网页设计，特别是在达到 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
text-align: center给first-pic-container
@media(max-width: 576px) {
.first-pic-container {
text-align: center;
}
}
默认情况下，图像是内联元素，因此您只需要添加文本对齐：中心; 到它的父元素。如果要使用边距：0自动;然后您需要将图像设置为显示：块;
一种方法是text-align: center;您的父div，在您的情况下，即.first-pic-container
@media(max-width: 576px) {
.first-pic-container {
text-align: center;
}
}
代码笔：https://codepen.io/junaidkbr/pen/VWOWvK
你需要
@media only screen and (max-width: 576px)
{
.first-pic-container {
text-align:center;
}
}
body{
font-family: Futura;
}
.navbar-toggle{
background-color: transparent;
border: none;
}
.active {
border-bottom: #F48A2C solid 2px;
}
.nav-item{
margin-right: 50px;
}
.nav-link{
color: #62697A;
}
.navbar {
margin-top: 25px;
}
.jumbotron {
color: #8E9299;
text-align: center;
}
p {
color: #8E9299;
}
.first-p-container {
margin-top: 10px;
}
.step-one-p {
text-align: center;
}
.second-p-container {
margin-top: 10px;
}
.step-three-p {
text-align: center;
}
.third-p-container {
margin-top: 20px;
}
.step-two-p {
text-align: center;
}
.step-container {
margin-left: 25px;
}
/* when the screen size goes below 374 px... */
@media (max-width: 374px)
{
.navbar-toggler {
display: none;
}
}
@media (min-width: 320px)
{
.small-sub-header{
display: none;
}
}
@media (max-width: 320px)
{
.main-header{
display: none;
}
.sub-header{
display: none;
}
.small-sub-header{
display: inline-block;
}
}
@media (max-width: 425px)
{
h1{
font-size: 32px;
}
.sub-header{
margin-top: 25px;
}
}
@media only screen and (max-width: 576px)
{
.first-pic-container {
border: solid;
text-align:center;
}
.first-step{
border: solid;
}
}<head>
<title> Schedule Builder · Class Registration Done Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<div class = "container header-container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="logo" src="logo.png" width="250px;">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron" style="background-color: transparent;">
<h1 class="main-header display-5"> We know that class registration is a hassle. </h1>
<h1 class= "sub-header display-5"> Let Schedule Builder help! </h1>
<h1 class= "small-sub-header display-5"> Schedule Builder is here to help! </h1>
</div>
<div class="container step-container">
<div class="row">
<div class="col-sm-4 first-pic-container">
<img class="first-step" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Square_200x200.svg/200px-Square_200x200.svg.png" alt="firstpic" width="100">
<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>
<div class="col-sm-4 second-pic-container">
<img class="second-step" src="step2image.png" alt="secondpic">
<div class= "row">
<div class="col-sm-12 col-md-12 col-lg-11 second-p-container">
<p class="step-two-p"> Schedule Builder will get right to work and create all possible schedules for you!</p>
</div>
</div>
</div>
<div class="col-sm-4 third-pic-container">
<img class="third-step" src="step3image.png" alt="thirdpic">
<div class= "row">
<div class="col-sm-12 col-md-12 col-lg-10 third-p-container">
<p class="step-three-p"> Pick your ideal schedule, check out our schedule ratings, and share it with your friends!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>