【问题标题】：How to align the text middle of BUTTON如何对齐 BUTTON 的文本中间
【发布时间】：2012-11-04 10:35:30
【问题描述】：

谁能帮我在下面写代码

这是我当前的代码

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

div 标签在 html 页面中有 loginBtn 类和 span 标签有“登录”文本

.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;应该在你的 CSS 中工作。
使用button.style.padding = '0px'

标签： html css

【解决方案1】：

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

【讨论】：

不适用于多行文本

【解决方案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;
}

&lt;div id="loginBtn" class="loginBtn"&gt;&lt;span&gt;Log in&lt;/span&gt;&lt;/div&gt;

编辑（2018）：使用弹性盒

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

【讨论】：

【解决方案3】：

有时它会被 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>

对我有用

【讨论】：

【解决方案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;
}

【讨论】：