画像とテキスト（画像の下にテキストが来るイメージ）両方を中央横並びにしたい。

Question

前提・実現したいこと

画像とテキスト両方を横並びの中央揃えにしたいです。
画像の下にテキストが来るイメージでそれが横並びに9個並んでいるイメージです。

該当のソースコード

            <ul class="round">
                <li><img src="#"><p class="txt-content">aaaaaa</p></li>
                <li><img src="#"><p class="txt-content">iiiiiiiii</p></li>
                <li><img src="#"><p class="txt-content">uuuuuuuuuu</p></li>
                <li><img src="#"><p class="txt-content">eeeeeee</p></li>
                <li><img src="#"><p class="txt-content">ooooooooooooo</p></li>
                <li><img src="#"><p class="txt-content">kakakakakkakaka</p></li>
                <li><img src="#"><p class="txt-content">kikikikikiki</p></li>
                <li><img src="#"><p class="txt-content">kukukukuku</p></li>
                <li><img src="#"><p class="txt-content">kekekekeke/p></li>
            </ul>

.round > li{
  list-style:none;
}

.round > li > *{
  display:block;
  vertical-align:middle;
  margin:0;
}

.round p {
	color: #999999;
}

.round img {
    border-radius: 50%;
    width: 97px;
    height: 97px;
   
}

Answer 1

こういうことでしょうか？

.round > li{
  list-style:none;
}

.round{
  display:flex;
  flex-flow:row nowrap;
}
.round > li > *{
  display:block;
  vertical-align:middle;
  margin:0;
}

.round p {
    color: #999999;
    text-align:center;
}

.round img {
    border-radius: 50%;
    width: 97px;
    height: 97px;

}

元のCSSを継承しているため画像の下にぴったり文字がくっつく形になっています。
また画像同士のmarginを設定していないので必要であればmarginを追加してください。
横並びに９個並べたいとのことなのでnowrapで改行をしない設定にしていますが必要であればwrapに変更してください。

追記

横幅100px でテキスト強制改行

.round > li{
  list-style:none;
  width:100px;
}

.round{
  display:flex;
  flex-flow:row nowrap;
}
.round > li > *{
  display:block;
  vertical-align:middle;
  margin:0;
}

.round p {
  word-break: break-all;
    color: #999999;
    text-align:center;
}

.round img {
    border-radius: 50%;
    width: 100px;
    height: 100px;

}

Comments

[rara0210]

確かに横並びになりましたが、中央揃えになりません。。。
また文字数の影響なのか画像同士の間がまばらです。
margin: 0 20px; などしても間はあきますがまばらのままです。。。

[gogoweb_ikeda]

文字数が一文字（画像より小さい）想定でしたので文字に対する制限はかけていません。
文字数が多い場合はどのような挙動を想定していますか？
画像の横幅(97px)が要素の最大値で、文字がそれを超える場合は改行するのでしょうか？

[rara0210]

文字数が多い場合width:100pxが要素の最大値で、超えた場合は改行にしたいです。
imgのwidthは100px;に変更するつもりです。

[rara0210]

左寄せのままになってしまいます。
また、margin:0 10px; にした場合文字だけに反応され、画像はそのままです。
roundにwidth:1000px margin:0 auto;を書き足してみましたが若干ずれて中央揃えになります。
中央揃えにし画像同士のmarginが反映されれば完璧です。

[gogoweb_ikeda]

marginを追加しているのはどこにしていますが？要素同士にマージンを追加するので
.round > li に追加してください。
テキストの左寄せは他のクラスの影響を受けていませんか？
text-align:center!important　に変えてみてください。

[rara0210]

思い通りになりました！ありがとうございます。

Answer 2

.round > li{
  list-style:none;
}
.round > li > *{
  display:block;
  vertical-align:middle;
  margin:0;
}

こっちではどうでしょう？

Comments

[rara0210]

横並びになりませんね。。。
現在のコードを編集して再度書きました。
ちなみに、画像は丸のイメージなので丸のまま横並びの中央揃えにしたいです。

Answer 3

これでどうですか？

.round > li{
  display:flex;
}
.round > li > *{
  display:inline-block;
  vertical-align:middle;
  line-height:97px;
  margin:0;
}

Comments

[rara0210]

試してみましたが、画像が縦並びになりその横に文字が来る感じになってしまいました。

画像 画像　画像
　a i u

みたいな感じにしたいです。
a

[rara0210]

試してみましたが、画像が縦並びになってしまいます。
画像の下に文字がきて横並びの中央揃えにしたいです。

[rara0210]

23：21分のコメントはミスです！
ですがイメージとしては画像の下にa 隣の画像の下にi
みたいな感じです。

[geta]

あ、ミスの指摘を忘れてました。

<ul classs="round">
↓
<ul class="round">

classのsが３つありますよ。