Flex布局 ul文字加图片居中显示

效果

看了一早上flex视频 尝试修改一下以前项目的布局格式

	<div class="container">
		<div class="peripheral" id="wrapper1">
			<!-- <div id="scrollOne"> -->
			<ul class="featurecon">
				<li fid="food"><img src="img/hotel.png" ><br/>餐饮</li>
				<li fid="hotel"><img src="img/hotel.png" ><br/>酒店</li>
				<li fid="supermarket"><img src="img/hotel.png" ><br/>超市</li>
				<li fid="bus"><img src="img/hotel.png" ><br/>公交车站</li>
				<li fid="parking"><img src="img/hotel.png" ><br/>停车场</li>
				<li fid="scenic"><img src="img/hotel.png" ><br/>景点</li>
				<li fid="movie"><img src="img/hotel.png" ><br/>电影院</li>
				<li fid="wc"><img src="img/hotel.png" ><br/>厕所</li>
				<li fid="petrol"><img src="img/hotel.png" ><br/>加油站</li>
				<li fid="bank"><img src="img/hotel.png" ><br/>金融</li>
			</ul>
			<!-- </div> -->
		</div>
		
	</div>

css

.container{
    		display: flex;
    		width: 400px;
    		flex-direction: column;
    	}
    	.peripheral{
    		display: flex;
    		flex: 1 0 200px;
    		flex-direction: row;
    		text-align: center;
    	}
    	.peripheral ul{
    		display: flex;
    		width: 280px;
    		flex-direction: row;
    		text-align: center;
    		flex-wrap: wrap;
    	}
    	.peripheral ul li{
    		display: flex;
    		width: 56px;
    		background: #00008B;
    		flex-direction: column;
    		align-items: center;    
    		justify-content:center ;
    	}
    	.peripheral ul li img{
    		display: flex;
    		justify-content: center;	
    		height: 40px;
    		width: 40px;
    	}

图片居中

	align-items: center;    
    justify-content:center ;

align-content：多行才有用，和justify-content用法差不多，只有一行的时候align-content没有任何效果。