要素の中のテキストを縦方向で中央に配置したい

Question

HTML,CSSの練習でコーディング模写をしています。

要素の中でのテキストの位置を、縦方向で中央揃えにしたいです。自分ではvertical-alignプロパティを使ってやってみましたが、上手くいきません。

以下に該当するコードを示します。

HTML

        <div class="three-ball">
            <ol>
                <li>1.テキストテキストテキスト</li>
                <li>2.テキストテキストテキスト</li>
                <li>3.テキストテキストテキスト</li>
            </ol>
        </div>

CSS

    .three-ball > ol > li {
        display: inline-block;
        margin-left: 50px;
        border: solid;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        vertical-align: middle;
     }

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[keisuke3035]

すみません。気が付きませんでした。修正しました。

Answer 1

こんな感じでしょうか。

    .three-ball > ol > li {
        display: inline-flex; /* CHANGE */
        margin-left: 50px;
        border: solid;
        border-radius: 50%;
        height: 200px;
        width: 200px;
        /* vertical-align: middle; *//* DELETE */
        align-items: center; /* ADD */
     }
```**動くサンプル：**[https://jsfiddle.net/52pxfn9s/](https://jsfiddle.net/52pxfn9s/)

Comments

[keisuke3035]

回答ありがとうございます！とても参考になりました。

[think49]

To: kei344 さん
vertical-align: middle が無効状態(不要)ではありませんか。
align-items: center で縦方向の中央揃えは実装できているように見えます。

[kei344]

To: think49さん
そうですね、不要です。無効状態なので放置していましたが、「必須なので書いている」ように見えてもいけないので回答を修正しておきます。

Answer 2

line-heightを200pxにするといいかも。

Comments

[keisuke3035]

回答ありがとうございます！
無事解決できました。お手数で申し訳ないですがなぜそうなるのかもおしえて頂けるとありがたいです。一番早く回答いただいたのでベストアンサーにさせていただきます。

[icegreen]

基本的にline-heightは文字の上下の中央から、次の行の文字の中央までの高さを指しています。
もし、次の行がなければheightの高さになるようです。
もちろん、ここでの次の行とは、brのことです。
Liタグはブロック要素が基本なので、次のliタグは別の段落扱いになります。

[think49]

To: keisuke3035 さん
文字列の幅が200pxを超過するように長い文字列を挿入すれば、挙動が分かると思います。

[yoshinavi]

line-heightだと、1行のみなら良いですが、複数行になったらダメですね。
提示のコードでも私の環境では複数行になります。

[icegreen]

では、方法の一つとして…
olタグに対して、display:table;
liタグに対して、display:table-cell; vertical-align: middle;
というのはどうでしょう？

たしかに1行の想定で回答してみましたが、複数行を考えるのであれば、こちらが有効かと思います。

[think49]

To: icegreen さん
それだと、自動改行による折り返しが働かないのでは…。

[yoshinavi]

icegreenさんへ

table-cellも良いかと思いますが、各要素のmargin調整がいる場合（この場合は左右）に、少し厄介になるかと思われます。

[think49]

To: yoshinavi さん
table は border-spacing でセル間のマージンを調整可能です。
marginと違って4方向別々の値を振る事はできませんが、今回のケースでは2方向でも支障はなさそうです。
ただ、親要素の幅が不足している時の挙動が質問者の期待通りではないように思います(質問文では、display: inline-block でしたので)。
https://jsfiddle.net/L245tbo1/show/
https://jsfiddle.net/L245tbo1/

[yoshinavi]

think49さんへ
ありがとうございます。
「border-spacing でセル間のマージンを調整可能」
すっかり抜けてました。勉強になります。