質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

774閲覧

横並びにした<ol><li>の高さを中央にした

pegy

総合スコア245

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/11 15:15

以下のように、高さを有する<div>の中にある横並びの<ol><li>の高さを中央に寄せたいのですがうまく設定することができません。
いろいろ調べてみるとvertical-align: middleを設定するなどがヒットするのですが、適用できる要素とできない要素があるようで、例えばolstyle="display:table"listyle="display:table-cell"などが例で上がっているのですが、横並びにするために既にliにはstyle="display:inline"が設定されるため、うまく実装することができません。
何か良い解決策はございませんでしょうか?
よろしくお願い申し上げます。

JSFiddleのサンプル

html

1<div class="wrapper"> 2 <div class="content"> 3 <ol> 4 <li>1</li> 5 <li>2</li> 6 </ol> 7 </div> 8</div>

css

1.wrapper{ 2 width:100%; 3 height:50px; 4 background:skyblue; 5} 6.content{ 7 8} 9ol{ 10 list-style-type: none; 11 padding-left:0; 12 margin-block-start: 0; 13 margin-block-end: 0; 14} 15li{ 16 display:inline; 17}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

いくつかやり方はありますが、最近はflex boxでの調整が多いと思います。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

こんな感じでどうでしょうか?

css

1.wrapper{ 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 width:100%; 6 height:50px; 7 background:skyblue; 8}

細かい説明はURLのチートシートを見ていただければと思いますm(__)m

投稿2021/06/11 19:24

runnynose

総合スコア508

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2021/06/12 00:52

コメントありがとうございます。 flex-boxが対応しやすかったです。助かりした!
guest

0

固定値の指定になっちゃいますが、olline-height.wrapperと同じ50pxにするという手があります。(行は折り返すことなく.wrapperに収まるという前提で。)

投稿2021/06/11 15:39

編集2021/06/11 15:44
itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2021/06/11 15:51

ありがとうございます。line-heightの高さの設定は前後の要素とどのような依存関係にあるのかあまりはっきりしないため、利用は避けてきたのですが、親要素と同じ高さを付与すれば少なくとも中央寄席になるのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問