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

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

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

因为.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按钮。

您还可以将“最小高度”设置为“继承”,但随后您将看到其他属性是如何发挥作用的(例如,第一个子项(按钮之前的跨距中的跨距)具有块布局)。

或者,您可以开始在文本的其余部分添加多个包装器,这样它们的行为就像按钮一样,在跨度内构建适当的跨度,但是您似乎希望避免这样做。如果是,请检查两个不同的浏览器。

在button.css的第7行

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

如果删除垂直对齐语句,则相邻文本将与按钮文本对齐。

很有趣。从您提供的链接中,从上到下编号,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之间有这么大的区别。

我试着从头开始设计这个按钮。下面的css是我想到的。它的优点是按钮的相邻文本不需要包装在任何其他元素中。它在最新版本的Internet Explorer、Firefox和Safari中运行良好。火狐2没有正确地调整按钮的高度,IE6和IE7都用自己的特殊方式来处理。

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;
}

你可以试着用阴性的 margin-bottom 垂直向下拉按钮;如果使用与按钮内文本或按钮本身上的填充相同的值,则可能会将其正确放置。

我在工作,在IE6上写这篇文章(我知道,我知道…),所以我不能看得太近(没有萤火虫等-不是IT专业人员),但如果你用 vertical-align: baseline; 或者类似的东西,它将元素(而不是其中的文本)定位到周围文本的基线。

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

要使按钮与旁边的文本对齐,请执行以下操作:

1. 确保按钮(A div 在这种情况下)是 inline-block . 这真的很难,所以我写了一篇关于如何 IE6+ and other browsers to honor the inline-block .
2. 增加一个 vertical-align: middle 在按钮和文本上。