Как выровнять текст в середине КНОПКИ

Можете ли вы кому-нибудь помочь мне закодировать это ниже одного

Это мой текущий код

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

тег div имеют тег classBlog и тег 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 изображение. Теперь я не могу разместить текст "войти в систему" в середине изображения, если кто-нибудь поможет мне заполнить код

текст отображает левый верхний угол. Пожалуйста, помогите мне.

Ответ 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
}

Ответ 2

Когда-то это фиксируется Padding. Если вы можете играть с этим, тогда он должен исправить вашу проблему.

<style type=text/css>

YourbuttonByID {Padding: 20px 80px; "for example" padding-left:50px; 
 padding-right:30px "to fix the text in the middle 
 without interfering with the text itself"}

</style>

Это сработало для меня

Ответ 3

Это более предсказуемо, чем "высота строки"

.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>

Ответ 4

Я думаю, вы можете использовать Padding как: Надеюсь, этот может вам помочь.

.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;
}