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

Question

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

如果我使用普通的HTML按钮，文本基线正确排列。

Here's a live example of the problem.

我怎样才能获得文本基线排队？

Answer 1

括在一个span标记与下列样式旁边的文本：

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

Answer 2

在第7行中button.css有

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

如果删除垂直对齐声明相邻的文字将与按钮文字排列在一起。

---

有趣。从链接你提供的，编号从上到下，一对准=，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有这么大的区别。

Answer 3

由于.yui按钮具有以下属性：display: inline-block，它会像块，但留下来的内联。

通过表现直列，该元件的盒子模型将被附接到所述线，而按钮的内容将像块。因此，您必须按照Phase的建议进行某种垂直调整。

由于按钮有一个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按钮。您也可以将最小高度设置为继承，但您会看到其他属性如何发挥作用（例如，第一个子项（按钮之前的跨度中的跨度）具有块布局）。

或者，你可以开始添加文本周围的其他多个包装，以便他们的行为就像由跨度内建立相应的跨按钮，但你似乎想避免这种情况。如果你这样做，检查几个不同的浏览器。

Answer 4

我从头开始设计按钮样式。以下CSS是我想出来的。它的优点是，按钮的相邻文本不需要包含在任何其他元素中。它在最新版本的Internet Explorer，Firefox和Safari中运行良好。 Firefox 2没有正确调整按钮高度，而IE 6和IE 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; 
} 

Answer 5

你可以尝试使用负margin-bottom拉按钮垂直升降;如果您使用与按钮内文本或按钮本身上的填充相同的值，则可能会将其正确定位。我在工作，并写在IE6上（我知道，我知道...），所以我真的不能看得太紧密（没有Firebug等 - 不是IT专业人员），但是，如果您使用的是vertical-align: baseline;或类似的东西，它会将元素而不是其中的文本定位到周围文本的基线。

你可以交替，请尝试使用line-height: $height;其中$高度等于按钮的垂直高度;这迫使周围文本在该高度内垂直居中。没有保证，但它可能/应该工作。

Answer 6

要与文本对齐按钮旁边：

1. 确认按钮（在这种情况下div）是inline-block。这真的很难，所以我就如何获得IE6+ and other browsers to honor the inline-block做了一点小小的改进。
2. 上的按钮和文本添加vertical-align: middle。