0

私は興味がある。楽しみとヒントのためですが、テキストを中央に配置するプロパティを処理できるかどうか知っていますか。

JS bin にポスト コードがあります (CSS が開かない場合は更新してください): http://jsbin.com/3/uhumok/edit?html,css,live

HTML :

<a class="one" href="#">Hi !</a>

CSS :

a {
    display:block;
    color:white;
    text-decoration:none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
    width:100px;
    height:100px;
    text-align:center;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;

    border-width:50px;
    border-color:rgba(0,0,0,1);

    -webkit-transition:0.2s ease;
    -moz-transition:0.2s ease;
    -ms-transition:0.2s ease;
    -o-transition:0.2s ease;
    transition:0.2s ease;
}

a:hover {
    border-width:0;
    border-color:rgba(0,0,0,0.5);

    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
}

a.one {border-style:solid;}

:afterこれはorなしでは不可能だと思います:before。

4

2 に答える 2

0

内に別のタグを追加できません<a>か? その場合、この内部タグを絶対配置してそれを実現できます: http://jsbin.com/3/uhumok/6/edit?html,css,live。

于 2012-05-19T14:47:09.910 に答える
0

color:#000 にして、:hover に padding-top:50px を追加すると、テキストはほぼ同じ場所に留まります。保存オプションが表示されなかったため、例を保存しませんでした。:before/:after を使用した場合、テキストは絶対に配置されるため、なぜそれらを使用したくないのかわかりません。

于 2012-05-19T14:48:57.273 に答える