将文本基线与 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:

进行操作，该属性基本上使用以下排版术语将所有 *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 浏览器上使用 line-height 时遇到了一些问题 ()，所以有时正确的解决方案是使用父级 padding * 和垂直对齐，而不是内部子级的对齐方式（使用 line-height）。

*_{（注意：块元素的 padding 比内部内联元素上使用的（顶部、底部）更加一致。）}

Answer 2

我想你所追求的是

vertical-align: text-bottom;

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

p.box {
    color:#fff;
    background:#444;
    width:400px;
    line-height: 40px;
}

span { background: #666; }

input { vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; }

<p class="box"><span>some text</span> <input type="button" value="Button"/></p>

Answer 3

使用

align-items: baseline

和

flexbox

的现代解决方案。

.container {
    background-color: #333;
    height: 150px;

    font-size: 64px;

    display: flex;
    align-items: baseline;
    gap: 15px;
}

span {
    background: #666;
}

button {
    background-color: #cfe2f3;
    border: 2px solid black;
    font-size: 64px;
}

<div class="container">
   <span>text</span>
   <button>button</button>
</div>

您还可以对单个项目使用

align-self: baseline;

。