CSS　横並び要素を中央寄せにしたい

やりたいこと
下記のような不特定数の要素を３つの場合と、４つの場合と横並びにし、下に折り返された場合は中央よせにしたい


<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="content-script-type" content="text/javascript"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>
<title>タイトル</title>
<style>
ul.icons{
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}
ul.icons::after{
    display: block;
    content: " ";
    clear: both;
}
ul.icons li{
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.col3 li{
    width: calc(100% /3);
}

ul.col4 li{
    width: calc(100% /4);
}
ul.icons li img{width: 100%;}
    
</style>
</head>

<body>
<ul class='icons col3'>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
</ul>

<ul class='icons col4'>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
<li><img src='アイコン' width='100%'></li>
</ul>
</body>
</html>

上記のような要素を下記図のようにしたい。

現状のCSS


ul.icons{
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}
ul.icons::after{
    display: block;
    content: " ";
    clear: both;
}
ul.icons li{
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.col3 li{
    width: calc(100% /3);
}

ul.col4 li{
    width: calc(100% /4);
}
ul.icons li img{width: 100%;}

しかし、なぜかcol4だけ下記のようになってしまう

K_3578

2021/03/22 06:20

出来ればhtmlのソースコードはそのまま貼り付けて頂けると助かります。

u-sukesan

2021/03/22 06:32

編集いたしました。こう言うことであっていますでしょうか

Daregada

2021/03/22 07:53

Teratailの質問とそれに対する回答は、解決後も他の人が検索して見にくるので、タイトルの「floatの」(質問内容と合致していない部分)を削除したほうがいいのでは?

u-sukesan

2021/03/22 11:55

失礼しました。タイトルを変更しておきました

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

回答1件

ベストアンサー

提示のコードでは float はどこにもありませんね。

とりあえず float は使ってないなら、下記の疑似要素の clear は不要なので削除しましょう。他に影響を及ぼす危険があるので不要なのはなるべく削除するのが基本です。

css
1ul.icons::after{
2    display: block;
3    content: " ";
4    clear: both;
5}

横並びは、inline-block で実現しているようですが、現在では古い手法です。いまなら、Flexboxで横並びさせるのが主流です。これの方がシンプルで自由度が高く、トラブルが少ないです。

css
1ul.icons{
2    margin: 0;
3    padding: 0;
4    text-align: center;
5    list-style: none;
6    display: flex;
7    flex-wrap: wrap;
8    justify-content: center;
9}
10ul.icons li{
11    padding: 0;
12    margin: 0;
13}
14
15ul.col3 li{
16    width: calc(100% /3);
17}
18
19ul.col4 li{
20    width: calc(100% /4);
21}
22ul.icons li img{width: 100%;}