css设置多张图片横向居中显示方法（亲测有效）

第一次写文章，小激动（2020-3-4-13:24）

先讲一下实现的步骤：

1. 最终效果

2. 代码实现

HTML部分

	   	<div class="main">
		<div class="tag">
			分类小贴士
		</div>
		<div class="images" >
			<div class="mid">
				<img src="images/06.jpg" />
			</div>
			<div class="mid">
				<img src="images/05.jpg" />
			</div>
			<div class="mid">
				<img src="images/07.jpg" />
			</div>
			<div class="mid">
				<img src="images/11.jpg" />
			</div>
			<div class="mid">
				<img src="images/14.jpg" />
			</div>
		</div>
		<div style="clear:both;"></div>
		<div style="margin-bottom:30px;">
		</div>

CSS部分

	.main{
		width:100%;
		margin-top:40px;
	}
	.main .tag{
		margin:0 auto;
		width:200px;
		font-size:18px;
		border-bottom:1px solid #878787;
		text-align:center;
		margin-bottom:20px;
	}
	.main .images{	
        margin:0 auto;
		width:1300px;//设置<div>块的大小，要实现居中效果需要经过计算
	}
	.main .images .mid{
	    float: left;//设置左对齐
	    margin:5px;//图片边缘间隔
	}		
	.main .images .mid img{
	    width:250px;//规范图片长宽
	    height:300px;
	}	

要想显示 div 块里面的多张图片居中显示是要经过计算的，我一共使用了5张图片，每张都是宽是 250px，高是 300px，再加上每张图片的边缘间隔为 5px，那么

div 块的宽度应该是 5 乘以 250(px：五张图片宽度) 再加上 10 乘以 5(px：四个间隔乘以二和首和尾一共十个边缘)，结果是 1300px

思路：大 div 块包含小 div 块，用小 div 块来装图片，根据图片大小计算大 div 块的宽度，从而实现多张图片居中显示。

------------------------------------------------------------------------------------------------------------------------------------------=
还有一个问题，大 div 块的高度不需要设置，对图片显示没影响，我也不知道是咋回事。
小弟水平拙劣，如果上述情况各位兄台知道原因的，可以留言告知我一下，不胜感激。

文章代码借鉴网站：http://www.youtiy.com/detail_406.html
该网站有简单的免费模板下载，初学者可以下来看一下，弄懂代码再根据自己需要改动。