标签: baseline

我知道要将文本垂直对齐到块的中间,将行高设置为块的相同高度.

但是,如果我在中间有一个单词的句子,那就是2em.如果整个句子的行高与包含块相同,则较大的文本垂直对齐,但较小的文本与较大的文本在同一基线上.

如何设置它以使两个文本大小都垂直对齐,因此较大的文本将位于低于较小文本的基线上？

假设我在Label旁边有一个简单的TextBox:

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <Label Margin="3">MyLabel</Label>
        <TextBox Margin="3" Width="100">MyText</TextBox>
    </StackPanel>
    ...
</StackPanel>

这产生以下结果:

如您所见,MyLabel和MyText的基线未对齐,看起来很难看.当然,我可以开始玩边缘直到它们匹配,但由于这是一个常见的要求,我确信WPF提供了一个更简单,更优雅的解决方案,我还没有找到...

我以为我了解CSS的方式,但我现在需要向某人解释一些东西,我发现我做不到.

我的问题基本上归结为:vertical-align:baseline当同一行中存在其他对齐时,为什么会被忽略？

示例:如果第二个跨度有vertical-align:bottom,则第一个跨度的垂直对齐将被忽略baseline; 它表现得好像它bottom也一样.

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

如果所有跨度都具有垂直对齐baseline,或者如果它们都是baseline,则它们的行为与预期一致.

span:first-child {vertical-align:top}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:baseline;}

<p>
  <span>one</span> <span>two</span>
</p>

如果这是正常行为,那为什么不在任何地方描述？我没有找到任何说明基线和顶部/底部以这种方式相互干扰的来源.

感谢您提交APPNAME_HERE.我们已经审核了您的应用程序,并确定此时无法将其发布到App Store,因为它没有使用64 kbps的基线流来实现HTTP直播流协议来播放流式视频.在通过蜂窝网络传输视频馈送时,需要HTTP直播流,以便获得最佳用户体验并利用蜂窝网络最佳实践.该协议自动确定用户可用的带宽,并适当调整带宽,即使带宽流发生变化.这样,只要将64 kbps设置为基线源,就可以灵活地拥有任意数量的流.

这是我从Apple获得的,尽管我有48kbps,64kbps,128kbps和384kbps流可用.如何设置基线Feed？我的应用程序现在的工作方式是先加载可用的最低值,然后再按带宽向上扩展.这是我的索引m3u8

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=48000
stream-soundonly.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=64000
stream-64k.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=128000
stream-128k.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=384000
stream-384k.m3u8

Apple真的很挑剔

我有以下小提琴:

http://jsfiddle.net/tompazourek/sn5jp/

<p>some normal-sized text</p>

<p>some <small>small</small>-sized text</p>

p { line-height: 20px }

当我在Chrome中检查页面时,我发现第一段的计算高度是20px,但第二段的计算高度是21px.

为什么<small>标签会导致这些问题？我怎样才能解决这个问题？

<small>段落文本中的每个出现都会扰乱我的基线网格.

编辑:我后来还发现了一篇与此主题相关的有趣文章:Deep dive CSS:font metrics,line-height和vertical-align.

我试图以编程方式排列的一个实例的基线UITextField与实例UIButton.我目前正在以类似于此处描述的方式处理此计算,但是UITextField内容可能存在偏移.任何想法我如何才能获得文本位置UITextField甚至更好,是否有更简单的方法来对齐基线？

我试图通过他们的文本基线对齐a Label和a NumericUpDown.我是用代码而不是设计师来做的.如何获得文本基线的位置？

我试图使用flex-box在下面的图像上实现最后一个示例.

从我看来,align-items: baseline;当块只有1行时,属性很好.

该属性align-items: flex-end;产生一些问题主要是因为左侧和右侧项目具有不同的字体大小和行高.虽然项目的边缘是对齐的,但是当项目没有边框时,由字体大小和行高差异创建的空白区域看起来非常糟糕.

我试图在没有任何JS的情况下找到一个好的全方位解决方案.

提前致谢.

我正在写使用PHP将文本打印到图像.但是,该函数imagettftext()使用基线,而我需要垂直居中的文本.

所以,我要么需要一种方法来打印带有y的文本,而不是从顶部到基线的距离,但是从边界框的顶部到顶部,或者我需要一种方法,使用它可以确定边界框顶部和基线之间的距离.

显然,我很困惑你.所以,要说清楚:我知道这个功能imagettfbbox().使用该功能,我可以确定结果文本框的高度和宽度.然而,当打印时imagettftext(),它的高度对于垂直对齐是完全没用的,因为Y参数不是到盒子顶部的距离(或者甚至是底部,但至少我可以使用具有高度的东西)但是距离到内部文本的基线.

编辑:为什么我不接受最新的答案？

请参阅答案下方的最新评论,并将此图像用作参考.

我是CSS的新手,最近阅读了规范,并且在理解vertical-align属性方面遇到了一些问题.

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span>
<span style="border: 1px solid red; padding-left: 1px;"></span>
<span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span>
</div>

<div style="border: 1px solid black;">
<span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: …