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

我正在尝试使用响应式网页设计，特别是在打击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>

和Visual参考codepen。我加入了firstpic和first-pic-container周围的边框其中我试图中心：https://codepen.io/gkunthara/pen/VWdrYj

来源

2017-07-18 brownmamba

给text-align: center到first-pic-container

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

来源

2017-07-18 05:18:37

好知道。谢谢！ – brownmamba

图像默认一个内联元素，所以你只需要添加文本对齐：中心;到它的父元素。如果你想使用margin：0 auto;那么你需要设置图像显示：块;

来源

2017-07-18 05:18:13

一种方式做，这是text-align: center;你的父母DIV，你的情况，即.first-pic-container

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

Codepen：https://codepen.io/junaidkbr/pen/VWOWvK

来源

2017-07-18 05:19:38 Junaid

你需要

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

来源

2017-07-18 05:21:32 Rahul

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

回答

相关问题