応答ボックスの中央配置

Question

効果的にスタックして中央揃えの応答性のあるポッド（ボックス）を作成するのは難しいです。ボックスを積み重ねるのに成功しましたが、中央の配置をうまく適用できません。現在の左アライメントとは対照的に、中央揃えするボックスが必要になります。

現在のコード：

.container { 
    width:100%; 
    height:600px; 
} 

.content { 
    float:left; 
    height:275px; 
    margin-left:10px; 
    margin-right:10px; 
} 

.content1 { 
    width:300px; 
    padding:10px; 
    margin-top:20px; 
    border: 1px solid rgb(204, 204, 204); 
} 

.content2 { 
    width:300px; 
    padding:10px; 
    margin-top:20px; 
    border: 1px solid rgb(204, 204, 204); 
} 

---

<div class="container"> 
    <div class="content1 content"> 
     <h2>Box 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p> 
    </div> 

    <div class="content2 content"> 
     <h2>Box 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p> 
    </div> 

</div> 

すべての感謝を助けて！

Answer 1

多くは、全体的な構造とコードの可読性を改善するために行うことができますが、あなたの質問に答えるあなたの.containerクラスにtext-align: center;を追加し、display: inline-block;と.contentの浮き上がりを交換します。それはそのような場合にある場合は、以下の表示されているように私は、あなたがメディアクエリ@書くべき

Answer 2

             
  
 
   
 
    
.fullbox{ 
 
     margin: 0 auto; 
 
     display: table; 
 
    } 
 
    .container { 
 
     width:100%; 
 
    } 
 

 
    .content { 
 
     float:left; 
 
     height:275px; 
 
     margin-left:10px; 
 
     margin-right:10px; 
 
    } 
 

 
    .content1 { 
 
     width:300px; 
 
     padding:10px; 
 
     margin-top:20px; 
 
     border: 1px solid rgb(204, 204, 204); 
 
    } 
 

 
    .content2 { 
 
     width:300px; 
 
     padding:10px; 
 
     margin-top:20px; 
 
     border: 1px solid rgb(204, 204, 204); 
 
    }
 
    
<div class="fullbox"> 
 
     <div class="container"> 
 
      <div class="content1 content"> 
 
       <h2>Box 1</h2> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p> 
 
      </div> 
 

 
      <div class="content2 content"> 
 
       <h2>Box 2</h2> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae risus semper, faucibus nulla vitae, vulputate ante. Fusce non erat eu metus pellentesque suscipit facilisis ut dolor.</p> 
 
      </div> 
 

 
     </div> 
 
    </div>
 
   
 
  
 
 

 

、 はちょうどこのコードを追加しますが、 @media (max-width: 767px) { .content { float: none; } }

or updated fiddle link here, [Link][1] 


    [1]: https://jsfiddle.net/zeasts/ynyybte7/1/