基线垂直对齐，但在顶部

我试图获得类似于基准的垂直对齐，但在文本的第一行而不是最后一行。 top和text-top都没有得到正确的对齐方式。有任何想法吗？谢谢！基线垂直对齐，但在顶部

编辑：这假定字体大小在被对齐的元素中是相同的。在接受的答案上查看@FelipeAls的评论。

编辑：现在的代码示例和图片：

我试图做的是垂直对齐文本中几个inline-block的元素，使它们的基线都在相同的位置。我宁愿不使用边距和填充来推挤事物，因为我发现每当我这样做时，我最终都会与不同的浏览器一起玩鼹鼠。

HTML：

<div class="foo"> 
    <span>one</span> 
    <span>two two two two</span> 
    <span>three three three three three three three three three</span> 
    <button type="button">action</button> 
</div> 

<div class="bar"> 
    <span>one</span> 
    <span>two two two two</span> 
    <span>three three three three three three three three three</span> 
    <button type="button">action</button> 
</div>

CSS：

body { 
    font-family: sans-serif; 
    font-size: 12px; 
} 

button { 
    font-family: inherit; 
    font-size: inherit; 
} 

div { 
    position: relative; 
    width: 500px; 
    text-align: center; 
} 

div.foo, div.bar { 
    margin-bottom: 2em; 
} 

div span { 
    text-align: center; 
} 

div.foo span { 
    display: inline-block; 
    width: 50px; 
    vertical-align: top; 
} 

div.bar span { 
    display: inline-block; 
    width: 50px; 
    vertical-align: baseline; 
} 

div button { 
    display: inline-block; 
    width: 125px; 
}

见http://jsfiddle.net/don01001100/3t8v5L1j/3/。

来源

2015-11-25 Don 01001100

请包括代码示例，而不是代码的链接。更具体一点：你想与什么元素保持一致？ –

@Jonathan，对不起！我已经添加了相关的HTML和CSS。 jsfiddle中有一些额外的代码，但我在这里放的是相关的。 –

谢谢。这有帮助。 –

恐怕你只能做到这一点与CSS盒模型，如margin，padding。

这是因为不同的行内块元素在基线处对齐，但它们具有不同的设置，所以它们的文本略微垂直对齐。如果您将<button>和<span>的padding和margin更改为相同，那么它应该有效。

EDIT1

其实，现在我想起来了，你也许可以在像素手动设置值vertical-align。试用它（包括负值），看看你想要什么。这将取决于<span>s和<div>s的paddings和margins。

EDIT2

其实，vertical-align: text-top工作得很好对我来说：

来源

2015-11-25 15:20:20

它并没有黎明我改变他们是不同的。当我设置“文本顶部”时，我也改变了按钮的垂直对齐方式。当我将第一个示例更改回“top”时，我必须删除整个规则，而不是“vertical-align”的声明。这适用于Windows 8上的Chrome 46，IE 10和Firefox 41以及iOS设备上的Safari。谢谢！ –

这里是工作示例：http://jsfiddle.net/don01001100/3t8v5L1j/6/ –

@ Don01001100可能存在一个限制：具有不同字体大小的元素不会显示在同一行上，唉http：// jsfiddle.net/3t8v5L1j/7/（我没有进一步调查） – FelipeAls

基线垂直对齐，但在顶部

回答

相关问题