将文本基线与 CSS 中的按钮对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7293532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align text baseline with a button in CSS
提问by Paul Brauner
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.
我想实现此图像上表示的两种对齐方式之一：. 如果 CSS3 使事情变得更简单，那么它就可以，甚至更好。
My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.
我的主要问题是我设法将一个包含文本的 div 与按钮对齐，但文本本身与 div 的顶部而不是底部对齐。
采纳答案by Chris
I think what you're after is vertical-align: text-bottom;
我想你所追求的是 vertical-align: text-bottom;
回答by Roko C. Buljan
You can use: line-height!
您可以使用：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>set for the button parent,
where, as you can see, line-heightmatches the element height
and will align both texts at the element's (p) center.
Otherwise, the button, being an inlineelement by default, it's subject to manipulations using the CSS property vertical-align:which basically aligns all *inline** elements vertically inside a blocklevel element using this typography terms:
为按钮父级设置
，如您所见，line-height匹配元素height
并将两个文本在元素的 ( p) 中心对齐。否则，inline默认情况下按钮是一个元素，它会受到使用 CSS 属性的操作，该属性vertical-align:基本上使用以下排版术语在块级元素内垂直对齐所有 *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
* https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
exactly, you can even manually adjust the alignment using PX/ -PXand %
确切地说，您甚至可以使用PX/-PX和%
I've encountered some issues using line-height on Android browsers (), so sometimes the right solution was to play with the parent padding* and vertical-align rather than the inner children's alignments (with line-height).
我在 Android 浏览器 () 上使用 line-height 时遇到了一些问题，所以有时正确的解决方案是使用父padding* 和 vertical-align 而不是内部孩子的对齐方式（使用 line-height）。
*(note: paddingfor block elements is more consistent than (top, bottom) used on inner inline elements.)
* （注意：块元素的填充比用于内部行内元素的（顶部，底部）更一致。）
