横並びの画像をセンタリングしたい

いつも大変お世話になっております。

画像を横並びにして、それらをセンタリングしたいのですが、
bootstrap3を利用しているためか、できません。

<img src="img/head_1.jpg" class='img-responsive center-block'> と１つづつ設定すると、とりあえず真ん中によりますが、マージンですか？両方に隙間ができてしまいます。

これを回避する方法があれば、ご教授頂きたく。
宜しくお願いします。

		.img-flex {
			display: flex;
			align-content: center;
		}

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<img src="img/head_logo.jpg" class='img-responsive center-block'>
			<div class="img-flex">
				<img src="img/head_1.jpg" class='img-responsive'>
				<img src="img/head_2.jpg" class='img-responsive'>
				<img src="img/head_3.jpg" class='img-responsive'>
				<img src="img/head_4.jpg" class='img-responsive'>
				<img src="img/head_5.jpg" class='img-responsive'>
				<img src="img/head_6.jpg" class='img-responsive'>		
				<img src="img/head_7.jpg" class='img-responsive'>	
			</div>
		</div>

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが想像するような動作を実現する場合、align-contentプロパティではなく、justify-contentプロパティを使うべきではないかと思うのですが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .img-flex {
9            display: flex;
10            justify-content: center;
11        }
12    </style>
13</head>
14<body>
15<div class="container">
16    <div class="row">
17        <div class="col-xs-12">
18            <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_logo.jpg"
19                 class='img-responsive center-block'>
20            <div class="img-flex">
21                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_1.jpg" class='img-responsive'>
22                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_2.jpg" class='img-responsive'>
23                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_3.jpg" class='img-responsive'>
24                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_4.jpg" class='img-responsive'>
25                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_5.jpg" class='img-responsive'>
26                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_6.jpg" class='img-responsive'>
27                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/head_7.jpg" class='img-responsive'>
28            </div>
29        </div>
30    </div>
31</div>
32<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
33<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
34</body>
35</html>