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

Question

我想实现此图像上显示的两个对齐之一: .如果它使事情变得简单,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而不是内部子对齐(使用line-height).

*_{(注意:块元素的填充比内部内联元素使用的(顶部,底部)更加一致.)}

Answer 2

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

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