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

I would like to achieve one of the two alignments represented on this image: . CSS3 is ok or even better if it makes things simpler.

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

您可以使用：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:它基本上将所有 *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 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align}

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

我在 Android 浏览器上使用 line-height 时遇到了一些问题 ()，所以有时正确的解决方案是与父浏览器一起使用padding* 和垂直对齐而不是内部子元素的对齐方式（使用行高）。

*_{(note: padding for block elements is more consistent than (top, bottom) used on inner inline elements.)}