我习惯使用表来对齐图像和文本,但这与移动设备不太一样。所以我想改用CSS和DIV,但我没有经验。
基本上我想让三张图片居中,同时在每张图片上面写文字。它们应该居中,但填满观众正在使用的屏幕。
查看我的CSS(一个不起作用的开头)和我希望它如下所示的表格:http://beautebeaute.dk/#Hvordan
谢谢!
答案 0 :(得分:0)
您可以通过在一个div中包含元素来居中。使用自动边距和宽度使其居中。然后在里面使用section或div来向左浮动并添加宽度以使其居中。并使用text-align对齐文本。
如果您使用的是图片,请不要使用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;
}