Question

我习惯使用表来对齐图像和文本，但这与移动设备不太一样。所以我想改用CSS和DIV，但我没有经验。

基本上我想让三张图片居中，同时在每张图片上面写文字。它们应该居中，但填满观众正在使用的屏幕。

查看我的CSS（一个不起作用的开头）和我希望它如下所示的表格：http://beautebeaute.dk/#Hvordan

谢谢！

Answer 1

您可以通过在一个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;
}

使用表格之类的div

1 个答案: