twitter bootstrap 2.1按钮内嵌文本

时间:2012-09-22 06:43:22

标签: twitter-bootstrap

自Twitter引导版本2.1以来,我的按钮不再垂直对齐它们前面的文本。

显然,在之前的版本中,btn类有一个left:float,不再是这种情况了。

我想由我来改变我的页面以适应这种变化,但我无法弄清楚如何改变它。

以下是版本2.0中的样子:http://jsfiddle.net/Sherbrow/5N6FQ/

这是版本2.1中的一个:http://jsfiddle.net/ndemoreau/UKwEU/

我该怎么办?

谢谢!

2 个答案:

答案 0 :(得分:1)

2.0和2.1之间有很多变化,其中很多都涉及字体大小和行高。以下是我提出的问题:Demo (jsfiddle)

h1 small { vertical-align: middle; }
h1 small .btn-group {
    display: inline-block;
    vertical-align: text-top;
}

我怀疑这是真正的中心,但它应该足够接近。如果它在现实条件下不起作用(不同的按钮大小等),你应该尝试边距。

在Firefox 15,Google Chrome 24和IE 9上测试。

答案 1 :(得分:0)

将文本和按钮包装在单独的单元格中的表格几乎可以为您提供解决方案。然后,您可以使用填充将按钮准确定位在您想要的位置。

这是您需要的所有css,它可以让您对定位进行大量控制:

.textbefore  {  }
.buttonafter { padding-top: 4px; padding-left: 8px; }

工作JSFiddle Demo