html - 如何对齐按钮中间的文字

谁能帮我在下面的代码中编码

这是我当前的代码

<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图像创建了按钮。现在我无法将“登录”文本放置在图像的中间，任何人都可以帮助我完成代码

文本显示在左上角。请帮我。

最佳答案

您可以使用text-align: center; line-height: 65px;
Demo

的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
}