如何使按钮中的文本垂直居中？
[英]How to make the text vertical center in the button?
问题描述
如何使按钮中的文本垂直居中？ 我想将按钮文本放在垂直中心。
我的代码在这里：
#content { width: 900px; margin: 0 auto; text-align: center; } #content .btn { width: 120px; height: 40px; color: white; line-height: 30px; } #content .btn-teacher { background-color: rgb(120, 144, 156); } #content .btn-student { background-color: rgb(255, 112, 67); }
<body> <div id="content"> <button class="btn btn-teacher">I am a teacher</button> <button class="btn btn-student">I am a student</button> </div> </body>
我设置的line-height等于height ，为什么文本没有位于垂直中心？
5 个解决方案
解决方案1
1 2016-09-18 04:53:29
这在很大程度上取决于许多事情：
- 您选择的字体/字体粗细（某些字体可以渲染得比其他字体高或低）
- 按钮填充/边框大小
- 显示类型
在下面的示例中，我明确设置了所有这些内容，并且文本垂直居中，假设您的操作系统支持 Arial。
#content { width: 900px; margin: 0 auto; text-align: center; } #content .btn{ font-family: Arial, sans-serif; display: inline-block; width: 120px; height: 40px; color: white; line-height: 40px; box-sizing: border-box; padding-bottom: 0px; padding-top: 0px; } #content .btn::-moz-focus-inner { padding: 0; border: 0 } #content .btn-teacher { background-color: rgb(120,144,156); } #content .btn-student { background-color: rgb(255,112,67); } <div id="content"> <button class="btn btn-teacher">I am a teacher</button> <button class="btn btn-student">I am a student</button> </div>
解决方案2
1 2016-09-18 05:00:10
#content {
width: 900px;
margin: 0 auto;
padding: 0;
text-align: center;
position: relative;
height: 100vh;
}
#content .btn{
position: absolute;
top: 50%;
margin-top: 20px;
right: 50%;
width: 120px;
height:40px;
color: white;
line-height: 30px;
}
#content .btn-teacher {
margin-right: 60px;
background-color: rgb(120,144,156);
}
#content .btn-student {
margin-right: -60px;
background-color: rgb(255,112,67);
}
您主要查看以下内容：
1) #content with position: relative 和 height 100vh (vertical hight)。 您可能想在此处设置另一个数字。
2) #content .btn (general) 为两个带有缩进的按钮设置绝对位置。
3) #content .btn-teacher #content .btn-student 相应地调整对齐方式。
解决方案3
1 2016-09-18 05:15:08
您可以将按钮作为具有“button btn”类的<a>元素并应用行高和适当的填充。 这允许行高应用并垂直居中文本。
#content { width: 900px; margin: 0 auto; text-align: center; } #content .btn { width: 120px; color: white; line-height: 40px; padding:15px; margin:10px; text-decoration:none; } #content .btn-teacher { background-color: rgb(120, 144, 156); } #content .btn-student { background-color: rgb(255, 112, 67); }
<body> <div id="content"> <a class="button btn btn-teacher" href="#">I am a teacher</a> <a class="button btn btn-student" href="#">I am a student</a> </div> </body>
解决方案4
1 已采纳 2016-09-18 06:23:33
由于button元素默认执行此操作，因此只需删除line-height 。
为什么文字不在垂直中心
如果您要使用行高，并且由于按钮具有 2px 边框而不使用border-box ，则行高需要为 36px。
我还添加锚a元件作为比较。
.content { width: 900px; margin: 0 auto; text-align: center; margin-bottom: 10px; } .content .btn { width: 120px; height: 40px; color: white; } .content .btn2 { width: 120px; height: 40px; line-height: 36px; color: white; } .content a.btn { display: inline-block; width: 120px; height: 36px; line-height: 36px; border: 2px outset; color: white; } .content .btn-teacher { background-color: rgb(120, 144, 156); } .content .btn-student { background-color: rgb(255, 112, 67); }
<body> <div class="content"> <button class="btn btn-teacher">I am a teacher</button> <button class="btn btn-student">I am a student</button> </div> <div class="content"> <button class="btn2 btn-teacher">I am a teacher</button> <button class="btn2 btn-student">I am a student</button> </div> <div class="content"> <a class="btn btn-teacher">I am a teacher</a> <a class="btn btn-student">I am a student</a> </div> </body>
解决方案5
1 2020-11-02 06:54:41
AFAICT 部分基于接受的答案，您需要设置高度，然后还设置 line-height 减去任何边框。 例子
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .line-height-border-1 { margin: 5px; border: 1px solid red; height: 30px; line-height: calc(30px - 1px * 2); /* 1px * 2 is top + bottom border */ vertical-align: middle; } .line-height-border-2 { margin: 5px; border: 6px solid red; height: 30px; line-height: calc(30px - 6px * 2); /* 6px * 2 is top + bottom border */ vertical-align: middle; } .line-height-border-3 { margin: 5px; border: 0.75em solid red; height: 30px; line-height: calc(30px - 0.75em * 2); /* 0.75em * 2 is top + bottom border */ vertical-align: middle; } /* bad */ .line-height-border-4 { margin: 5px; border: 0.75em solid red; padding: 0.4em; height: 30px; /* 0.75em * 2 is top + bottom border 0.4em for padding */ line-height: calc(30px - 0.75em * 2 - 0.4em); vertical-align: middle; } /* bad */ .line-height-border-5 { margin: 5px; border: 0.75em solid red; padding: 0.4em; height: 30px; /* 0.75em * 2 is top + bottom border 0.8em for padding (top + bottom) */ line-height: calc(30px - 0.75em * 2 - 0.4em * 2); vertical-align: middle; } /* bad */ .line-height-border-6 { margin: 5px; border: 0.75em solid red; padding: 0.4em; height: 30px; /* 0.75em * 2 is top + bottom border 0.8em for padding (top + bottom) */ line-height: calc(30px - 0.8em - 0.75em * 2); vertical-align: middle; } .inline-flex { margin: 5px; display: inline-flex; border: 6px solid red; height: 30px; align-items: center; } .content-box { box-sizing: content-box; background: yellow; }
<button class="line-height-border-1"> Vertically Centered? </button> <button class="line-height-border-2"> Vertically Centered? </button> <button class="line-height-border-3"> Vertically Centered? </button> <p>Unfortunately I couldn't figure out a rule for padding</p> <button class="line-height-border-4"> Vertically Centered? </button> <button class="line-height-border-5"> Vertically Centered? </button> <button class="line-height-border-6"> Vertically Centered? </button> <div class="content-box"> <p>border-box: content-box</p> <button class="line-height-border-1"> Vertically Centered? </button> <button class="line-height-border-2"> Vertically Centered? </button> <button class="line-height-border-3"> Vertically Centered? </button> <p>Unfortunately I couldn't figure out a rule for padding though in this case the first one seems centered</p> <button class="line-height-border-4"> Vertically Centered? </button> <button class="line-height-border-5"> Vertically Centered? </button> <button class="line-height-border-6"> Vertically Centered? </button> </div> <p>things that don't work, inline-flex<p> <button class="inline-flex"> Vertically Centered? </button> <p>the text in the button above is too high</p>
实际上很难将按钮中的文本垂直居中，这似乎有点荒谬。 必须知道行高似乎有问题。
如何使引导图标文本和div中的按钮垂直居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.