1. ホーム
  2. 質問と答え
  3. メディア照会ブートストラップを使用した列のセンタリング

メディア照会ブートストラップを使用した列のセンタリング

2017-07-18 11 views
1

私はレスポンシブウェブデザイン、特に画面サイズ576ピクセルのヒット時に列コンテナ内のイメージのセンタリングに取り組んでいます。私は私が他の場所で見てきたこの文試してみた：メディア照会ブートストラップを使用した列のセンタリング

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

}

をしかし、それはあまりしません。私はまた、ブートストラップのoffsetクラスを使ってみましたが、何もしません。

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

はここに関連するHTMLです。私はセンターにしようとしていますfirstpicとfirst-pic-containerの周りに境界線を追加しました：あなたはテキストのみ、整列追加する必要があるので、https://codepen.io/gkunthara/pen/VWdrYj

出典

2017-07-18 brownmamba

答えて

3

は.first-pic-container

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

すなわちこれを行う1つの方法は、あなたのケースでは、あなたの親のdivをtext-align: center;することですtext-align: center

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

出典

2017-07-18 05:18:37

+0

知っています。ありがとう！ – brownmamba

1

イメージは、デフォルトではインライン要素です：センター;それは親要素です。余白を使用したい場合：0 auto;表示する画像を設定する必要があります：ブロック;

出典

2017-07-18 05:18:13

1

あなたが

を必要とします 0グッド 

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

関連する問題

 関連する問題