如何对齐BUTTON中间的文本

Question

你们有没有人可以帮我编写下面的代码

这是我目前的代码

<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图像创建了按钮.现在我无法在图像中间放置"登录"文本,任何人都可以帮我完成代码

文字显示左上角.请帮我.

Answer 1

您可以使用 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
}

Answer 2

比“线高”更可预测

.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）：使用flexbox

.loginBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}