如何对齐按钮中间的文字 [英] How to align the text middle of BUTTON

问题描述

任何人都可以帮我在下面的代码中进行编码

Can you anyone please help me to code this below one

这是我当前的代码

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

div标签具有loginBtn类，而span标签在html页面中具有登录"文本

div tag have loginBtn class and span tag having "log in" text in html page

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

I created the button using 1px image. Now i am unable to place the "log in" text middle of the image can any one help me complete the code

文本显示在左上角.请帮助我.

text is displaying left top corner. Please help me.

推荐答案

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

这篇关于如何对齐按钮中间的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！