1
4

5 に答える 5

2

ここに実用的なデモがあります

CSSでこれを行います-

.buttons { text-align: center;
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    font-family: DancingScript-Regular;
    font-size: 100%;
    padding-top: 50px;
    background-color: rgba(255,255,255,.0);
    padding: 15px 15px;
    border: 5px solid white;
    border-radius: 70px;
    box-shadow: 0px 0px 5px 5px #000000, 0 0 5px 5px #888 inset;
    left: 15%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

.buttonText { /*    
    width:  70px;
    height: 70px;*/
    display: inline-block;    
    padding: 18px 0 0 0;
    font-size: 100%;
    text-decoration: none;
    color: black;
}
于 2012-10-30T07:23:22.897 に答える
1

これにより、テキストが垂直方向および水平方向にボタンの中央に配置されます。

.buttonText {
    text-align: center;
    line-height: 70px;
    vertical-align:middle; 
    display: block;
    margin: auto auto;
    font-size: 100%;
    text-decoration: none;
    color: white;
}

お役に立てれば！

（編集：行の高さをボタンの高さに調整します。vertical-align:middle;垂直方向に中央揃えになります）

于 2012-10-30T07:28:08.943 に答える
1

.buttonText クラスAddからパディングを削除してline-height: 70px;、text-align: center;リンクを中央に配置します。

.buttonText {
    display: block;
    line-height: 70px;
    text-align: center;
    padding: 0; /*Change padding to 0*/
    width:  70px;
    height: 70px;
    font-size: 100%;
    text-decoration: none;
    color: white;

}

ここにフィドルがあります

于 2012-10-30T07:23:14.317 に答える
0

提案をありがとうございました....私はついにそれを動作させることができました：

.buttonText {
    margin-left: -23px;
    margin-top: -23px;
    position: absolute;
    text-align: center;
    padding: 28px;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 100%;
    text-decoration: none;
    color: white;
}

なぜこれが私にそんなに苦労したのか分かりません...私は通常、このようなボタンを実行するときに問題はありません。

于 2012-10-30T07:56:07.730 に答える
0

CSS でこれを削除します。

.buttonText {padding: 25px;}

次のようにします。

.buttonText {padding: 0;}
于 2012-10-30T07:23:27.003 に答える