如何使得我的三幅图片居中显示

我的思路是使得line贴合图片的实际大小，再利用margin:0 auto;来使得三幅图片居中，但发现，line无法拟合实际大小，请问该怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float3</title>
    <style>
 * {
            margin: 0px;
 padding: 0px;
 }

        .container {
            border: 1px lightgray dashed;
 height: auto;
 width: 75%;
 margin: 40px auto;
 }

        .line {
            margin:10px;
 width: auto;
 border: 1px lightgray solid;
 }

        .pic {
            float: left;
 margin: 20px;
 border: 1px lightgray solid;
 font-family: 微软雅黑;
 font-weight: bolder;
 }
        .clear{
            clear:both;
 }

    </style>
</head>
<body>
<div class="container">
    <div class="line">
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="clear"></div>
    </div>
    <div class="line">
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"
 alt=""><div class="welcome">欢迎来到慕课网学习新知识!</div></div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

周郎借东风 2018-02-28

源自：Float浮动 3-2 编程练习

收起

1回答

喜欢做梦的鱼 2018-02-28 18:17:55

根据上传代码，因为外层宽度为百分比，不同分辨率下的宽度不同，所以居中显示异常，给外层指定固定宽度（和内容的总宽度一样）就可以，参考下图，如果解决了你的疑惑，请采纳，祝学习愉快~~

收起回答

提问者周郎借东风 #1

如果我设置1300px的话……就不能在中间显示了，我的问题是有没有办法使得line的长度贴合实际长度

2018-02-28 20:40:33
好帮手慕珊回复提问者周郎借东风 #2

你是想line的宽度刚好能完全包裹其里面三个图片的宽度吗？这个是计算出来的，就是你的图片宽度再加上图片间空隙等的宽度，加起来就是line的宽度了。另外，你把line的margin属性改为：margin：10px auto，三张图片就居中了

2018-03-01 10:02:14