将YUI按钮的基线与其旁边文本的基线对齐

时间:2009-06-24 06:17:04

标签: html css yui

我想在某些文本旁边显示YUI按钮,但YUI按钮文本的基线不与其旁边文本的基线对齐。按钮文本和旁边的文本的字体系列和大小都相同。

如果我使用纯HTML按钮,则文本基线会正确排列。

Here's a live example of the problem.

如何让文字基线排成一行?

6 个答案:

答案 0 :(得分:1)

使用以下样式将相邻文本括在span标记中:

<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
   YUI Button:
</span>

答案 1 :(得分:1)

由于.yui按钮具有属性display: inline-block,因此它的行为类似于块,但保持内联。

通过内联行为,此元素的框模型将附加到该行,而按钮的内容将表现为块。因此,您必须按阶段建议进行某种垂直调整。

由于按钮有min-height: 2em,您必须进行一些手动调整。这样:

.yui-skin-sam .yui-button {
    margin-bottom: -0.5em; /* adjust for 2em min-height */
    vertical-align: baseline; /* use consistent baseline */
}

在IE7,FF3和Chrome中给了我很好的结果,但它们之间仍然存在轻微的不一致。您可能已经探索了在第一个跨度,第一个子跨度和按钮导致轻微不一致的其他属性。当然,您也可以调整选择器以仅应用于按钮的一个实例,而不是所有yui按钮。

您还可以将min-height设置为继承,但随后您将看到其他属性如何发挥作用(例如,第一个子节点(按钮之前的跨度中的跨度)具有块布局)。

或者,您可以开始在文本的其余部分周围添加多个包装器,以便它们通过在跨度内构建适当的跨度来表现得像按钮,但您似乎想要避免这种情况。如果您这样做,请检查几个不同的浏览器。

答案 2 :(得分:0)

在button.css的第7行,有

.yui-button {
   display:-moz-inline-box;
   vertical-align:text-bottom;
}

如果删除vertical-align语句,则相邻文本将与按钮文本对齐。


有趣。从您提供的链接,从上到下编号,a =对齐,n =未对齐,不同的浏览器显示:

ie6 1 n, 2 n, 3 n 
ie7 1 a, 2 n, 3 n 
ie8 1 a, 2 n, 3 a 
ff2 1 a, 2 n, 3 a 
ff3 1 a, 2 n, 3 n 
saf 1 a, 2 a, 3 a 
chr 1 a, 2 a, 3 a

删除垂直对齐将其固定在ff2中,但不是ff3。

IE不支持内联块。这可能会导致一些浏览器差异。

我不知道为什么safari / chrome,ff2和ff3之间存在如此大的差异。

答案 3 :(得分:0)

我从头开始设计按钮。我想出了以下CSS。它的优点是按钮的相邻文本不需要包含在任何其他元素中。它在最新版本的Internet Explorer,Firefox和Safari中运行良好。 Firefox 2没有正确调整按钮高度的大小,IE 6和7每个都按照自己的特殊方式进行处理。

Here's a live example of this code.

.yui-button {
  display: inline-block;
  background: transparent url(http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/sprite.png) repeat-x scroll 0 0;
  border-color: #808080;
  border-style: solid;
  border-width: 1px 0;
  margin: auto 0.25em;
}
.yui-skin-sam .yui-button .first-child {
  display: inline-block;
  border-color: #808080;
  border-style: solid;
  border-width: 0 1px;
  margin: 0 -1px;
}
.yui-skin-sam .yui-button button {
  background-color: transparent;
  border: medium none;
  margin: 0;
  min-height: 2em;
  padding: 0 10px;
}

答案 4 :(得分:0)

您可以尝试使用否定margin-bottom垂直拉下按钮;如果您使用与按钮内文本上的填充相同的值,或者按钮本身使用的填充值,则可能正确定位。

我在工作,并在IE6上写这个(我知道,我知道......),所以我真的不能看得太近(没有Firebug,等等 - 不是IT专业人士),但如果你使用了vertical-align: baseline;或类似的东西,它将元素而不是其中的文本定位到周围文本的基线。

您也可以尝试使用line-height: $height;,其中$ height等于按钮的垂直高度;这会强制周围文本在该高度内垂直居中。没有保证,但可能/应该有效。

答案 5 :(得分:0)

让按钮与旁边的文字对齐:

  1. 确保按钮(本例中为div)为inline-block。这真的很难,所以我做了一些关于如何获得IE6+ and other browsers to honor the inline-block
  2. 的文章
  3. 在按钮和文字上添加vertical-align: middle