以下のような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なので..サイズが決まっていないから上手くいかないのかな?と想像してはいるのですが..?
いまのところこんな感じです。
よろしくお願いします。
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
はい..ごもっともなのですが..こういう場合に一般的な解決策があるのかとおもって..いろいろと試行錯誤はしたのですが...
ある程度追記しみます
「試行錯誤した部分」をどのような不恰好なものでも良いので提示されたほうが良いです。もしかしたら1歩手前までいっているかもしれませんし、遠いかもしれません、考え方自体が間違っているかもしれませんが、それは見ないと分かりませんので。
とりあえず追記してみました。ご指摘の通りなのですが..知っている人からみたら「あーそれは○○とやるのですよ」ってことで..試行錯誤が全く違う方法だったら逆に面倒かな〜って思っていまして...。
私も職場でExcel等質問されるときに..
「途中までやってみて..こんな感じで..」って延々説明されて..結局は..「それって○○関数ですぐおわりますよ」みたいな感じに..やりたいことだけ言ってくれた方が楽だった..ってことが結構あるもので..。
一応「できるところまで自分でやってみよう」がteratailの方針なので。やり方が間違っているというアドバイスがもらえればそれはそれで勉強になったと思えるのではないかと思います。どれが絶対正しいというのは存在しないので、色々なやり方があるという点では、「丸投げ」の低評価をもらうよりはマシだと思います。 https://teratail.com/help/question-tips#questionTips1
見出しより文章部分が高くなった場合に見出しの位置はどこになるのでしょうか。
基本は、、見出しの円に表示されている領域よりも説明文が長くならない予定ですが...仮になったとするのならば見出しのセンター(縦)と説明文全体のセンター(縦)が揃うイメージです
この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、それも質問文に追記して置いてくださいね。
えっと..すみません..そんな状態でterateil使うなといわれてしまうかもしれませんが..。このスレッド部分を丸ごと質問文の所に挿入しておくかんじですか?その場合はなにかマークダウンしとくとか決まりというか..流儀的なものはありますか?他の質問もみてみたのですが..それらしい部分を見つけられませんでした
「見出しの円に表示されている領域よりも説明文が長くならない予定ですが...仮になったとするのならば見出しのセンター(縦)と説明文全体のセンター(縦)が揃うイメージです 」が要件になるので追記しては、と言う話です。
あーなるほど!わかりました。要領えなくてすみません。
回答2件
あなたの回答
tips
プレビュー