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

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

ただいまの
回答率

90.75%

  • CSS

    5305questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 89

D.O

score 45

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

<section>
  <h1>見出し</h1>
    <ul>
      <li>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</li>
      <li>説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文</li>
    </ul>
</section>


イメージ説明

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

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

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

    section {
      position: relative;
    }

    section h1 {
      background-color: skyblue;
      color: white;
      text-align: center;
      font-size: 18px;
      width: 125px;
      height: 125px;
      float: left;
      border-radius: 50%;
      line-height: 125px;
    }

    section ul {
      padding-left: 150px;
      position: absolute;
      top:0;
      bottom:0;
    }


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

イメージ説明

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • D.O

    2018/05/28 09:59 編集

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

    キャンセル

  • kei344

    2018/05/28 10:01

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

    キャンセル

  • D.O

    2018/05/28 10:02

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

    キャンセル

回答 2

+5

    section {
      position: relative;
      min-height: 125px;
      display: flex;
      align-items: center;
    }

    section h1 {
      background-color: skyblue;
      color: white;
      text-align: center;
      font-size: 18px;
      width: 125px;
      height: 125px;
      border-radius: 50%;
      line-height: 125px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      margin: 0;
    }

    section ul {
      padding-left: 150px;
    }

動くサンプル:https://jsfiddle.net/ks0uja9v/


【上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA】
https://ics.media/entry/17522

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 10:08

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

    キャンセル

checkベストアンサー

+4

flexのalign-items:center;

section {
  display:flex;
  align-items:center;
}
h1{
  width:100px;
  height:100px;
  background: #eee;
  flex-shrink:0;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/28 10:08

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5305questions

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