将文本基线与 CSS 中的按钮对齐

Posted 2023-03-05

【中文标题】将文本基线与 CSS 中的按钮对齐

【英文标题】：Align text baseline with a button in CSS

【发布时间】：2011-11-09 17:57:01

【问题描述】：

我想实现此图像上显示的两种对齐方式之一：。如果 CSS3 能让事情变得更简单，那么 CSS3 还可以，甚至更好。

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

【问题讨论】：

你总是可以通过使用 padding-top 来实现它，但你可能知道这一点

【参考方案1】：

您可以使用：line-height!

.box 
  color: #fff;
  background: #444;
  height:      40px;  
  line-height: 40px; /* Same as height  */

<p class="box">some text <input type="button" value="Button" /></p>

为按钮父级设置， 如您所见，line-height 匹配元素 height 并将在元素的 (p) 中心对齐两个文本。 否则，按钮，默认情况下是 inline 元素，它会使用 CSS 属性 vertical-align: 进行操作，该属性基本上使用此排版在 block 级别元素内垂直对齐所有 *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/en-US/docs/Web/CSS/vertical-align}

没错，您甚至可以使用PX / -PX 和% 手动调整对齐方式

我在 android 浏览器 () 上使用 line-height 时遇到了一些问题，因此有时正确的解决方案是使用父级 padding * 和 vertical-align 而不是内部子级的对齐方式 (行高）。

*_{（注意：块元素的 padding 比内部内联元素使用的 (top, bottom) 更加一致。）}

【讨论】：

似乎几乎完美：是否可以将 line-height 设置为不是固定值，而是设置 div 的高度，无论布局引擎设置为什么？

我一直尝试单独设置输入的行高，但我认为这不是必需的（：感谢提示

@Paul... 您的问题并不十分清楚：您的元素是否在段落中？一个DIV？虚线是主 DIV 的 TOP 或底线。

@roXon，对不起，虚线只是为了实现我想要实现的对齐。我的文本和按钮都在底部的 div 中。文字在左下角，按钮在右下角。现在，文本相对于按钮“高”。您提出的解决方案是完美的，但它将高度设置为 40px，因此我猜它对于用户调整大小不会很健壮。

【参考方案2】：

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

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

p.box 
    color:#fff;
    background:#444;
    width:400px;
    line-height: 40px;


span  background: #666; 

input  vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; 

<p class="box"><span>some text</span> <input type="button" value="Button"/></p>

【讨论】：

为了清楚起见，这只解决了第一种情况（对齐块元素）。 @Roko 的回答解决了第二个问题。