CSSのaタグのスタイル変更のみでdiv全体をリンクにする

要するに

がしたいんだけど
cssってきちゃないサンプルが多いよね。

環境は
IE 11.0.23 (KB3087038)
FiewFox 41.0.1
Chrome バージョン 45.0.2454.101 m (64-bit)
古すぎなければいけるはず...

cssのサンプル

/* 枠線、背景、widthの設定が可能 */
div.centering  {
    /* 横幅 */
    width: 174px;
    /* 枠線 */
    border: solid 1px #CECECE;
 
    /* 必須 */
    text-align: center;
}
 
/*linkのスタイル、高さの設定が可能*/
div.centering a {
    /* フォントカラー */
    color: #F07A00;
    /* 高さ(上下に同じ値を設定) */
    padding: 10px 0px;
     
    /* 以下は必須 */
    display: block;
    width: 100%;
    height: 100%;
}
 
/* ホバーエフェクトもできちゃうぜ */
div.centering:hover {
    border: solid 1px #CECECE;
    background-color:#DDDDDD;
}

使用法

<div class="centering">
    <a href=""> sample </a>
</div>

高さの設定が微妙にしづらいのが惜しい。(paddingじゃないと縦のセンタリングが出来ない)
そこそこ応用は効くと思います。
HTML5からdivをaタグで囲めるようになったらしいけどやりたいことができないことも多い

CSSのaタグのスタイル変更のみでdiv全体をリンクにする

cssのサンプル

使用法

2015年10月14日水曜日