css3-将文本基线与C中的按钮对齐

我想实现此图像上表示的两个对齐方式之一:problem representation。 CSS3可以使事情变得更简单,甚至更好。

我的主要问题是我设法将包含文本的一个div与按钮对齐,但是文本本身与div的顶部而不是底部的对齐。

Paul Brauner asked 2020-02-12T12:30:33Z
2个解决方案
35 votes

您可以使用:PX

PX
PX

为按钮parent设置
如您所见,其中PX与元素-PX相匹配
并将两个文本在元素的(%)中心对齐。否则,该按钮默认为inline元素,需要使用CSS属性vertical-align:进行操作,该属性使用以下印刷术术语将所有* inline **元素基本上在块级元素内垂直对齐:

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 10em;  
vertical-align: 4px;
vertical-align: 20%;

* [https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align]

确切地说,您甚至可以使用PX/-PX%手动调整对齐方式

我在Android浏览器()上使用line-height遇到了一些问题,因此有时正确的解决方案是使用父填充*和vertical-align,而不是内部子项的对齐方式(使用line-height)。

*(注意:块元素的填充比内部内联元素上使用的(顶部,底部)更一致。)

Roko C. Buljan answered 2020-02-12T12:32:50Z
26 votes

我想你要的是vertical-align: text-bottom;

[http://jsfiddle.net/EQgFF/3/]

Chris answered 2020-02-12T12:30:53Z
translate from https://stackoverflow.com:/questions/7293532/align-text-baseline-with-a-button-in-css