dt dd を使って複数行の表組みをして、更にdt内を上下中央揃えにするのは、ネット上で情報が無かった為、試行錯誤の末、見つけ出しました。

大阪南法律事務所
大阪府河内長野市の河内長野駅前にある、大阪南法律事務所の公式ホームページ。女性弁護士も在籍しています。南大阪で弁護士をお探しなら、当事務所へ。
あかつき建築設計
兵庫県姫路市にある一級建築事務所、あかつき建築設計の公式ホームページ。姫路市のみならず、加古 川・高砂・たつの・相生など近隣の市の工事を請け負っています。一戸建て・リフォーム・リノベーションまで、お客様のご依頼にお応え致します。相見積もり 歓迎。まずはお問い合わせ下さい。

 

HTMLコード

以下がHTMLコードです。複数行の場合は、dlを、設定したい行数分繰り返すのがミソです。

CSSのコード

レスポンシブに対応出来るよう、スマホ用も併記しておきます。CSSコードでは、display要素に、table と table-cell を使うのがコツです。これを使えば、 vertical-align が使えるようになります。

PC用

スマホ用

PC用で設定していた、widthとdisplayを初期化すれば、横並びから縦並びに戻すことが出来ます。

 

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)