css 如何将BUTTON的文本居中对齐

ipakzgxi 于 2023-01-03 发布在其他

关注(0)|答案(5)|浏览(251)

你可以请任何人帮我编码这下面的一个
这是我当前的代码

<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图像。现在我无法放置"登录"文本中间的图像可以任何人帮助我完成的代码
文本显示在左上角。请帮助我。

css

来源：https://stackoverflow.com/questions/13217797/how-to-align-the-text-middle-of-button

5条答案

按热度按时间

h9vpoimq1#

您可以使用text-align: center; line-height: 65px;
Demo
中央支助系统

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

赞(0）回复(0）举报 2023-01-03

b4wnujal2#

这比"行高"更可预测

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

赞(0）回复(0）举报 2023-01-03

hfsqlsce3#

有时它是由填充固定的。。如果你能玩那个，那么，它应该可以解决你的问题

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

对我很有效

赞(0）回复(0）举报 2023-01-03

rbl8hiat4#

我认为您可以像这样使用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;
}

赞(0）回复(0）举报 2023-01-03

k97glaaz5#

你可以用