31

誰かが私がこれを以下にコーディングするのを手伝ってくれませんか

これは私の現在のコードです

<div id="loginBtn" class="loginBtn"><span>Log in</span></div>

divタグにはloginBtnクラスがあり、spanタグにはhtmlページに「ログイン」テキストがあります

.loginBtn {
    background:url(images/loginBtn-center.jpg) repeat-x;
    width:175px;
    height:65px;
    margin:20px auto;
    border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 1px 2px #5e5d5b;
}

1pxの画像を使用してボタンを作成しました。現在、画像の中央に「ログイン」テキストを配置できません。コードを完成させるのに役立つ人はいますか？

テキストが左上隅に表示されています。私を助けてください。

4

4 に答える 4

29

使用できますtext-align: center; line-height: 65px;

デモ

CSS

.loginBtn {
    background:url(images/loginBtn-center.jpg) repeat-x;
    width:175px;
    height:65px;
    margin:20px auto;
    border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 1px 2px #5e5d5b;
    text-align: center;  <--------- Here
    line-height: 65px;   <--------- Here
}
于 2012-11-04T10:39:21.670 に答える
20

これは「行の高さ」よりも予測可能です

.loginBtn {
    background:url(images/loginBtn-center.jpg) repeat-x;
    width:175px;
    height:65px;
    margin:20px auto;
    border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 1px 2px #5e5d5b;
}

.loginBtn span {
    display: block;
    padding-top: 22px;
    text-align: center;
    line-height: 1em;
}
<div id="loginBtn" class="loginBtn"><span>Log in</span></div>

編集 (2018): フレックスボックスを使用

.loginBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}
于 2012-11-04T14:11:30.393 に答える
2

次のようにパディングを使用できると思います。これが役に立てば幸いです。

.loginButton {
    background:url(images/loginBtn-center.jpg) repeat-x;
    width:175px;
    height:65px;
    margin:20px auto;
    border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 1px 2px #5e5d5b;
    <!--Using padding to align text in box or image-->
    padding: 3px 2px;
}
于 2014-12-20T04:23:23.960 に答える