使用divs like表

Question

我習慣使用表格來對齊圖像和文本，但這並不適用於移動設備。所以我想用CSS和DIV代替，但我沒有經驗。

基本上我希望有三張圖片居中，每張上面寫着文字。他們應該居中，但填寫觀衆正在使用的屏幕。

同時看到我的CSS（即不工作的開始），我希望它看起來像下表：http://beautebeaute.dk/#Hvordan

謝謝！

Answer 1

你可以通過在一個div中包含元素來居中。使用margin auto和width來使它居中。然後在內部使用部分或div向左浮動並添加寬度以使其居中。文本使用文本對齊進行對齊。

如果你正在使用圖像，不要浮動，而是使用margin：0 auto。

例如http://jsfiddle.net/56Rns/3/

HTML

<div class="container"> 
    <section> 
     <h3>Title1</h3> 
     <img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" /> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium 
     </p> 
    </section> 
    <section> 
     <h3>Title2</h3> 
     <img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" /> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium 
     </p> 
    </section> 
    <section> 
     <h3>Title3</h3> 
     <img class="pic" src="http://i50.tinypic.com/2je1u2s.jpg" /> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus distinctio consequatur omnis quia perspiciatis accusantium recusandae. Consectetur cumque hic laboriosam autem libero officiis placeat quos perspiciatis laudantium 
     </p> 
    </section> 
</div> 

CSS

.container{ 
    width:900px; 
    margin:0px auto; 
} 
section{ 
    width:250px; 
    float:left; 
    text-align:center; 
    padding:10px; 
} 
img.pic{ 
    width:170px; 
    margin:0 auto; 
}