響應盒的中心對齊

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

很多可以做，以提高整體結構和代碼的可讀性，但要回答你的問題，加text-align: center;您.container類和替換浮動.content與display: inline-block;。

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/