我正在学习前端开发,我正试图使用引导代码我的第一个网站。我被一件很简单的事情困住了,我想。如何在按钮内居中显示文本?
这是一个按钮,默认使用“a”标记。
<a class="btn btn-default btn-work" href="#">Check my work</a>
并给了它一个宽度和高度,文本仍然停留在顶部。
.btn-work {
width: 250px;
height: 50px;
margin: 0 auto;
vertical-align: middle;
}
我还试图将按钮与容器的中心对齐,但我也无法弄清楚。
谢谢!
6条答案
按热度按时间am46iovg1#
使文本在按钮内居中。使用此代码。
要使按钮居中,请使用父div将其对齐到中心。
CSS:
HTML:
完整CSS:
t9aqgxwy2#
看到这个fiddle
使用
在您的
CSS
中为.btn-work
添加。所以,完整的CSS就像
上面的输出就像
z6psavjg3#
我刚发现的。
就用
line-height: 0px;
在你的按钮CSS中。
现在,您的CSS看起来像这样
:-
.btn{ line-height: 0px;}
neskvpey4#
有时使用
text-align: center
不起作用,即使在父元素上也是如此。您可能需要:
xiozqbni5#
在这里,您可以将链接作为按钮。您可以在标记内制作按钮。
omtl5h9j6#
你可以用
在按钮本身上,可以为所有按钮创建一个类并应用CSS