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

Question

我想实现此图片上显示的两个对齐中的一个：。如果CSS3变得更简单，CSS3就可以了，甚至更好。

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

Answer 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:进行操作，该属性基本上在块级别内垂直对齐所有*内联**元素使用这种排版术语的元素：

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遇到了一些问题，所以有时候正确的解决方案是使用父填充 *和vertical-align而不是内部子对齐（线高）。

* _{（注意：块元素的填充比内部内联元素使用的（顶部，底部）更一致。）}

Answer 2

我认为你所追求的是vertical-align: text-bottom;

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