Html 将YUI按钮的基线与其旁边文本的基线对齐
我想在一些文本旁边显示一个YUI按钮,但是YUI按钮文本的基线与它旁边文本的基线不对齐。按钮文本及其旁边的文本的字体系列和大小相同 如果我使用纯HTML按钮,文本基线将正确对齐Html 将YUI按钮的基线与其旁边文本的基线对齐,html,css,yui,Html,Css,Yui,我想在一些文本旁边显示一个YUI按钮,但是YUI按钮文本的基线与它旁边文本的基线不对齐。按钮文本及其旁边的文本的字体系列和大小相同 如果我使用纯HTML按钮,文本基线将正确对齐 如何使文本基线对齐?用以下样式将相邻文本括在span标记中: <span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;"> YUI Button: </span> YUI按钮: 在bu
如何使文本基线对齐?用以下样式将相邻文本括在span标记中:
<span style="vertical-align: middle; display: inline-block; margin-top: -1.1em;">
YUI Button:
</span>
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之间有这么大的区别。因为.yui按钮具有属性
display:inline block
,它的行为就像一个块,但保持内联
通过内联行为,此元素的框模型将附加到行,而按钮的内容将表现为块。因此,您必须按照阶段建议进行某种垂直调整
由于该按钮的最小高度为2米,因此您必须进行一些手动调整。这:
.yui-skin-sam .yui-button {
margin-bottom: -0.5em; /* adjust for 2em min-height */
vertical-align: baseline; /* use consistent baseline */
}
在IE7、FF3和Chrome中给了我很好的结果,但它们之间仍然有轻微的不一致。您可能已经了解了在第一个跨距、第一个子跨距和按钮上应用的其他哪些属性会导致轻微的不一致。当然,您也可以调整选择器,使其仅应用于按钮的一个实例,而不是所有yui按钮
您也可以将最小高度设置为“继承”,但随后您将看到其他属性是如何发挥作用的(例如,第一个子项(按钮前跨距中的跨距)具有块布局)
或者,您可以开始在文本的其余部分周围添加多个包装器,以便通过在范围内构建适当的范围,使它们的行为与按钮一样,但您似乎希望避免这种情况。如果需要,请检查两个不同的浏览器。我尝试从头开始设置按钮的样式。下面的CSS就是我想到的。它的优点是按钮的相邻文本不需要包装在任何附加元素中。它在最新版本的Internet Explorer、Firefox和Safari中运行良好。Firefox2没有正确地确定按钮高度的大小,IE 6和IE 7各有其独特的方式来改变按钮高度
您可以尝试使用负片
边距底部垂直向下拉按钮;如果使用与按钮内文本或按钮本身上的填充相同的值,则可能会将其正确定位
我在工作,在IE6上写这篇文章(我知道,我知道…),所以我不能看得太近(没有Firebug,等等-不是IT专业人士),但是如果你使用vertical align:baseline
或类似的东西它将元素(而不是其中的文本)定位到周围文本的基线
您也可以尝试使用行高:$height代码>其中$height等于按钮的垂直高度;这将强制周围的文本在该高度内垂直居中。不保证,但它可能/应该工作。要使按钮与旁边的文本对齐:
确保按钮(本例中为div
)为inline block
。这真的是很难的一部分,所以我写了一篇关于如何获得的文章
在按钮和文本上添加一个垂直对齐:中间
那没用。您可以在这里看到这样的结果,我通过将垂直对齐语句重置为基线的默认值,有效地消除了垂直对齐语句的影响:如果可能的话,我希望避免创建额外的元素来实现这一点,但这肯定是一个起点。您是如何得出顶部边距为-1.1em的值的?我以前遇到过这个问题,而负边距可以修复各种对齐错误,尤其是当您试图实现跨浏览器兼容性时。出于好奇,为什么这是一个社区wiki?@ricebowl,为什么不?是否有任何原因使其他人无法编辑问题?如果你认为你能澄清我的问题,请编辑它。我的问题不是要批评你的公共精神;只是通常-我没有任何经验证据-CWs是针对那些答案本身主观且有争议的问题。这让我很惊讶@米堡,没问题;我不认为你的评论是批评。我从来都不知道什么时候该用CW。我感到惊讶的是,将问题标记为CW并不是默认设置,而且通常是针对我自己的问题。有几次有人修改了这个问题,是为了让它更清楚,所以我对它只有很好的体验。为了解释上面的评论:它们来自一个与这个问题相同的重复问题。是的,差不多了!我做到了这一点,诀窍是确保按钮是内联块,并且按钮和文本都有垂直对齐:中间。vertical align:middle
不适用于所有字体的所有浏览器。请尝试“谢谢你”链接上的代码;但是我在那里看到的CSS看起来非常像我在响应链接页面中描述的方法,以使所有浏览器都支持显示:inline块。我不确定是否真的有区别。
.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;
}