将文本定位在按钮内
将文本定位在按钮内
提问于 2013-10-30 10:19:16
我有按钮，里面有文字，上面有太多的空间。是这样的：
我如何将文本定位得更高一点，这样它就不会被按钮的边框分割？
HTML：
<input type="button" value="a">
到目前为止，这是我的CSS：
input[type="button"], input[type="submit"] {
min-width: 40px;
height: 25px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
padding: 0px;
}即使使用了line-height，!important属性也不会更改任何内容。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-30 10:49:05
设置一个固定的高度将抛出对齐。设置字体大小将足够div自动大小和文本将居中。试试这个新的css：
input[type="button"], input[type="submit"] {
min-width: 40px;
font-size: 30px;
color: #ffffff;
margin-right: 10px;
}Stack Overflow用户
发布于 2013-10-30 12:12:11
如果您真的希望保留按钮的固定宽度和高度以及文本的字体大小，那么您可以这样做。这是将文本放在不同的div中，这样您就可以将其放置在按钮的顶部。如果按钮是“相对位置”，则文本div是“位置:绝对”，并且HTML是结构化的，因此文本div位于按钮标记中，那么它将很好地分层。同样，当这样做时，文本将与按钮一起移动，不会被移动(如果您给按钮一个页边距:100‘t)。
<button value="">
<div id="buttonText">a</div>
</button>
Here is my CSS so far:
<style>
button {
width: 40px;
height: 25px;
margin-right: 10px;
position: relative;
}
#buttonText
{
font-size: 30px;
position: absolute;
top: -9px;
left: 9px;
color: #FFF;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19690841
复制
相似问题
在Android中定位按钮内的文本
将文本定位在<label></label>内
文本区域内按钮的绝对定位
div内的按钮定位
UIStackView内的定位按钮
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
