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

Question

我想实现此图像中表示的两个对齐方式之一: .如果 CSS3 使事情变得更简单，则 CSS3 可以甚至更好。

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

Answer 1

您可以使用:行高!

.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: 进行操作，该属性基本上将所有 *inline** 元素垂直对齐 block 级元素使用此排版术语:

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 浏览器 () 上使用行高时遇到了一些问题，所以有时正确的解决方案是使用父级 padding * 和 vertical-align 而不是内部子级的对齐方式 (行高)。

*_{(注意: block 元素的 padding 比内部行内元素使用的(顶部，底部)更一致。)}