1. ホーム
  2. 質問と答え
  3. マージンを使用してコンテンツを中央に配置できない

マージンを使用してコンテンツを中央に配置できない

2017-06-09 8 views
-1

画面サイズが768px未満の場合、3つのボックスは左に揃えられます。私はそれらを中心に見せようとするのは苦労している。マージンを使用してコンテンツを中央に配置できない

私はマージンを左に設定して中心に置くことができましたが、その後は反応しません。

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<body> 
     <div class="row bg_color"> 
      <div class="col-xs-12 col-sm-4 col-md-4 stats_box"> 
       <h3>2015/16</h3> 
       <hr> 
       <ul> 
        <li>The Best FIFA Men's Player 2016</li> 
        <li>FIFA Club World Cup</li> 
        <li>France Football Ballon D'Or 2016</li> 
        <li>UEFA Best Player in Europe</li> 
        <li>UEFA Euro 2016 (Portugal)</li> 
        <li>UEFA Champions League (Real Madrid)</li> 
       </ul> 
      </div> 
      <div class="col-xs-12 col-sm-4 col-md-4 stats_box"> 
       <h3>2014/15</h3> 
       <hr> 
       <ul> 
        <li>Pichichi Award</li> 
        <li>European Golden Boot 2015</li> 
        <li>FIFA Ballon D'Or 2014</li> 
        <li>Globe Soccer Best Player of the Year</li> 
        <li>Globe Soccer Fan's Favourite Player Award</li> 
        <li>IFFHS Trophy for Best Striker on the planet</li> 
       </ul> 
      </div> 
      <div class="col-xs-12 col-sm-4 col-md-4 stats_box"> 
       <h3>2013/14</h3> 
       <hr> 
       <ul> 
        <li>Club World Cup</li> 
        <li>BBC Overseas Sports Personality Award</li> 
        <li>World's Top Goalscorer 2013</li> 
        <li>Pichichi Award</li> 
        <li>Best Player, Best Forward in La Liga</li> 
        <li>UEFA Best Player in Europe</li> 
       </ul> 
      </div> 
     </div> 

</body>

CSS：

.bg_color { 
    background: #ECFEAA; 
} 

.stats_box { 
    margin: 20px; 
    padding: 20px 40px 40px; 
    max-width: 400px; 
    text-align: left; 
    background: #fff; 
    border-bottom: 4px solid #ccc; 
    border-radius: 6px; 

} 

@media only screen and (max-width: 768px) { 
    .stats_box { 
    width: 100%; 
    margin-left: 200px; 
    } 
}

このための任意の可能な解決策

ここでは、コードですか？そして、なぜそうではありません余白：0自動はここでは機能しませんか？コードへ

リンク：CodePen

出典

2017-06-09 user2035893

+0

あなたの元の値を変更する場合は、答えが関連する方法がないので、質問内のコード、私はすべての私のコメントと答えを削除しました。 – LGSon

答えて

0

768pxのためにこれを試すには、これが役立ちます

@media only screen and (max-width: 768px) { 
.stats_box { 
    width: 100%; 
    left:50%; 
    transform:translateX(-50%); 
} 
}

希望に動作します！

出典

2017-06-09 06:04:24

1

CSSに以下を追加して、3つのボックスを中央に配置します。あなたは、ブートストラップクラスとブートストラップクラスで、ネストクラスを使用している

.row.bg_color { 
    display: flex; 
    justify-content: center; 
}

出典

2017-06-09 06:09:25 Gerard

+0

これにより、起動時に_bootstraps_グリッドが壊れ、すべてのアイテムが水平方向に流れるようになります。 – LGSon

0

すべてちょうど次のようなあなたのマークを変更し、CSSを更新一部

の第一は、あなたのコードが動作しない理由ですfloat:leftを使用しています。

の作業フィドルfiddle

@media only screen and (max-width: 768px) { 
    .stats_box { 
    width: 100%; 
    margin: 20px auto; 
    } 
} 


.bg_color { 
 
    background: #ECFEAA; 
 
} 
 

 
.stats_box { 
 
    margin: 20px; 
 
    padding: 20px 40px 40px; 
 
    max-width: 400px; 
 
    text-align: left; 
 
    background: #fff; 
 
    border-bottom: 4px solid #ccc; 
 
    border-radius: 6px; 
 
} 
 

 
@media only screen and (max-width: 768px) { 
 
    .stats_box { 
 
    width: 100%; 
 
    margin: 20px auto; 
 
    } 
 
} 
 

 
body { 
 
    margin: 0 auto; 
 
}
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div class="row bg_color "> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> 
 
     <div class="stats_box"> <!-- Place here the class same as rest --> 
 
     <h3>2015/16</h3> 
 
     <hr> 
 
     <ul> 
 
      <li>The Best FIFA Men's Player 2016</li> 
 
      <li>FIFA Club World Cup</li> 
 
      <li>France Football Ballon D'Or 2016</li> 
 
      <li>UEFA Best Player in Europe</li> 
 
      <li>UEFA Euro 2016 (Portugal)</li> 
 
      <li>UEFA Champions League (Real Madrid)</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> 
 
     <div class="stats_box"> 
 
     <h3>2015/16</h3> 
 
     <hr> 
 
     <ul> 
 
      <li>The Best FIFA Men's Player 2016</li> 
 
      <li>FIFA Club World Cup</li> 
 
      <li>France Football Ballon D'Or 2016</li> 
 
      <li>UEFA Best Player in Europe</li> 
 
      <li>UEFA Euro 2016 (Portugal)</li> 
 
      <li>UEFA Champions League (Real Madrid)</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 col-md-4"> 
 
     <div class="stats_box"> 
 
     <h3>2015/16</h3> 
 
     <hr> 
 
     <ul> 
 
      <li>The Best FIFA Men's Player 2016</li> 
 
      <li>FIFA Club World Cup</li> 
 
      <li>France Football Ballon D'Or 2016</li> 
 
      <li>UEFA Best Player in Europe</li> 
 
      <li>UEFA Euro 2016 (Portugal)</li> 
 
      <li>UEFA Champions League (Real Madrid)</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

出典

2017-06-09 06:12:21 LKG

2

margin: 0 auto;あなたは.stats_boxにfloat: left;を持っているので、動作しません。だから、これをいくつかの方法で処理することができます。

1）とき768px <、DEMO

@media only screen and (max-width: 768px) { 
    .stats_box { 
    float: none; 
    margin: 15px auto; 
    } 
}

2）、col-xs-12の下に "直接" 働く容器内部を持っているとmax-widthとすべてを持っている必要はありませんfloatを削除します他のスタイリングは、margin: 0 auto;に設定してください。これは私の提案する解決策だろう。DEMO

<div class="col-xs-12 col-sm-4 col-md-4"> 
    <div class="stats_box"> 
     <h3>2015/16</h3> 
     <hr> 
     <ul> 
     <li>The Best FIFA Men's Player 2016</li> 
     <li>FIFA Club World Cup</li> 
     <li>France Football Ballon D'Or 2016</li> 
     <li>UEFA Best Player in Europe</li> 
     <li>UEFA Euro 2016 (Portugal)</li> 
     <li>UEFA Champions League (Real Madrid)</li> 
     </ul> 
    </div> 
    </div> 

@media only screen and (max-width: 768px) { 
    .stats_box { 
    margin: 15px auto; 
    } 
}

3）使用フレキシボックス768px <、DEMO

@media only screen and (max-width: 768px) { 
     .row { 
     display: flex; 
     justify-content: center; 
     flex-wrap: wrap; 
     } 
    }

4）使用インライン（私は何の例をこのソリューションを提案していないではないでしょう）

出典

2017-06-09 06:13:24

+0

最初の2は完全にうまくいっています:)したがって、プラス1 ...インラインブロックと組み合わせた第2のバージョンは、フレックスボックス（ブラウザの互換性に基づく）よりも優れています。 – LGSon

0

を追加してくださいあなたのスタイルのこのCSSコード

@media only screen and (max-width: 768px) { 
.stats_box { 
    width: 100%; 
} 
.center-col{ 
    float: none; 
    margin: 0 auto; 
} 
}

とHTMLで、

<div class="col-xs-12 col-sm-4 col-md-4 stats_box center-col">

あなたは.stats_boxでmargin:200pxが削除されたことを確認してください。これが助けてくれることを願って！

出典

2017-06-09 06:30:10

0

をcssに追加することをおすすめします。

メディアクエリは、幅、高さ、色などのメディア機能を使用してスタイルシートの範囲を制限する0個以上の式とオプションのメディアタイプで構成されています。 CSS3で追加されたメディアクエリは、コンテンツ自体を変更することなく、コンテンツの提示を出力デバイスの特定の範囲に合わせることができます。

構文：

@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
}

あなたは、このサイトで多くのことを学ぶことができます：あなたはすべての今してあなたの元codepenを変更するように見えるので、それが一致していない

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

出典

2017-06-09 06:32:15

関連する問題

 関連する問題