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

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

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

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

Q&A

解決済

2回答

238閲覧

css リストを垂直方向にそろえて表示するには?

D.O

総合スコア55

CSS

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

0グッド

0クリップ

投稿2018/05/28 00:14

編集2018/05/28 01:04

以下のようなHTMLがあって..これを添付画像の用に表示したいのですが...
上手くいかずにこまっています。

HTML

1<section> 2 <h1>見出し</h1> 3 <ul> 4 <li>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</li> 5 <li>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</li> 6 </ul> 7</section>

イメージ説明

見出し部分はこんな感じで3〜4文字です。
説明文は1〜3コ程度で各1〜2行です。
見出しの円に表示されている領域よりも説明文が長くならない予定ですが...仮になったとするのならば見出しのセンター(縦)と説明文全体のセンター(縦)が揃うイメージです

position:absoluteにしてみたりと..いろいろやっているのですが上手く行きません
ご教授いただけると幸いです

とりええず..以下のようにCSSで書いてみました

CSS

1 section { 2 position: relative; 3 } 4 5 section h1 { 6 background-color: skyblue; 7 color: white; 8 text-align: center; 9 font-size: 18px; 10 width: 125px; 11 height: 125px; 12 float: left; 13 border-radius: 50%; 14 line-height: 125px; 15 } 16 17 section ul { 18 padding-left: 150px; 19 position: absolute; 20 top:0; 21 bottom:0; 22 }

これで表示してみると..いかの感じです

イメージ説明

ある要素を親要素の縦方向の中央に配置したいとき..
絶対表示にして上と下からの距離を0とする方法は良く見かけるとおもいます。

ですが..今回の場合,中身がliなので..サイズが決まっていないから上手くいかないのかな?と想像してはいるのですが..?

いまのところこんな感じです。
よろしくお願いします。

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

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

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

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

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

kei344

2018/05/28 00:20

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
D.O

2018/05/28 00:22

はい..ごもっともなのですが..こういう場合に一般的な解決策があるのかとおもって..いろいろと試行錯誤はしたのですが...
D.O

2018/05/28 00:22

ある程度追記しみます
m.ts10806

2018/05/28 00:30

「試行錯誤した部分」をどのような不恰好なものでも良いので提示されたほうが良いです。もしかしたら1歩手前までいっているかもしれませんし、遠いかもしれません、考え方自体が間違っているかもしれませんが、それは見ないと分かりませんので。
D.O

2018/05/28 00:35 編集

とりあえず追記してみました。ご指摘の通りなのですが..知っている人からみたら「あーそれは○○とやるのですよ」ってことで..試行錯誤が全く違う方法だったら逆に面倒かな〜って思っていまして...。 私も職場でExcel等質問されるときに.. 「途中までやってみて..こんな感じで..」って延々説明されて..結局は..「それって○○関数ですぐおわりますよ」みたいな感じに..やりたいことだけ言ってくれた方が楽だった..ってことが結構あるもので..。
m.ts10806

2018/05/28 00:42

一応「できるところまで自分でやってみよう」がteratailの方針なので。やり方が間違っているというアドバイスがもらえればそれはそれで勉強になったと思えるのではないかと思います。どれが絶対正しいというのは存在しないので、色々なやり方があるという点では、「丸投げ」の低評価をもらうよりはマシだと思います。 https://teratail.com/help/question-tips#questionTips1
kei344

2018/05/28 00:47

見出しより文章部分が高くなった場合に見出しの位置はどこになるのでしょうか。
D.O

2018/05/28 00:51

基本は、、見出しの円に表示されている領域よりも説明文が長くならない予定ですが...仮になったとするのならば見出しのセンター(縦)と説明文全体のセンター(縦)が揃うイメージです
kei344

2018/05/28 00:53

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、それも質問文に追記して置いてくださいね。
D.O

2018/05/28 01:01 編集

えっと..すみません..そんな状態でterateil使うなといわれてしまうかもしれませんが..。このスレッド部分を丸ごと質問文の所に挿入しておくかんじですか?その場合はなにかマークダウンしとくとか決まりというか..流儀的なものはありますか?他の質問もみてみたのですが..それらしい部分を見つけられませんでした
kei344

2018/05/28 01:01

「見出しの円に表示されている領域よりも説明文が長くならない予定ですが...仮になったとするのならば見出しのセンター(縦)と説明文全体のセンター(縦)が揃うイメージです 」が要件になるので追記しては、と言う話です。
D.O

2018/05/28 01:02

あーなるほど!わかりました。要領えなくてすみません。
guest

回答2

0

CSS

1 section { 2 position: relative; 3 min-height: 125px; 4 display: flex; 5 align-items: center; 6 } 7 8 section h1 { 9 background-color: skyblue; 10 color: white; 11 text-align: center; 12 font-size: 18px; 13 width: 125px; 14 height: 125px; 15 border-radius: 50%; 16 line-height: 125px; 17 position: absolute; 18 top: 50%; 19 left: 0; 20 transform: translateY(-50%); 21 margin: 0; 22 } 23 24 section ul { 25 padding-left: 150px; 26 } 27```**動くサンプル:**[https://jsfiddle.net/ks0uja9v/](https://jsfiddle.net/ks0uja9v/) 28 29--- 30 31 32【上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA】 33[https://ics.media/entry/17522](https://ics.media/entry/17522)

投稿2018/05/28 01:00

kei344

総合スコア69364

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

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

D.O

2018/05/28 01:08

解決しました! Flexboxは余り使ったことがなかったのですが..これを機にやってみたいと思います いろいろ教えていただきありがとうございます
guest

0

ベストアンサー

flexのalign-items:center;

css

1section { 2 display:flex; 3 align-items:center; 4} 5h1{ 6 width:100px; 7 height:100px; 8 background: #eee; 9 flex-shrink:0; 10}

投稿2018/05/28 00:53

sousuke

総合スコア3828

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

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

D.O

2018/05/28 01:08

解決しました! Flexboxは余り使ったことがなかったのですが..これを機にやってみたいと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問