dlリストでdtをddの上下に対して中央揃えにする
■html
<dl> <dt>見出し</dt> <dd>内容</dd> </dl>
■css
dl {
display: table;
width: 360px;
border: 2px solid #ccc;
}
dt, dd {
display: table-cell;
padding: 0.5em 1em;
vertical-align: middle;
}
dt {
width: 20%;
background-color: #eee;
}
dd {
width: 80%;
}
参考サイト
- うどん県で働く Web ディレクターの日記
- [ CSS ] display: table-cell って便利そう！
- http://bowz.info/2631
-
前の記事
チェックボックスを画像に変更する 2016.10.24
-
次の記事
cssで横並びリストの区切り線を描く 2016.10.24