Question

我有一个文本输入框，旁边是一个按钮。问题是当按钮字体大小和输入框字体大小不同时，按钮不能正确对齐。

Ex - 不同的字体大小。请注意，按钮的底部比顶部

更多地延伸到输入框之外

＆＃13;

input{
  font-size:20px;
}

.btn {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 2px;
}

＆＃13;

<input>
<button class="btn btn-primary m-l">Add</button>

＆＃13;

Ex：相同的字体大小：按钮对齐：

＆＃13;

input{
  font-size:20px;
}

.btn {
  padding: 8px 12px;
  font-size: 20px;
  border-radius: 2px;
}

＆＃13;

<input>
<button class="btn btn-primary m-l">Add</button>

＆＃13;

Answer 1

使用 CSS Flexbox 。并应用align-items: center让您的孩子<div>垂直居中。在我的情况下，我使用body作为我的父元素

请看下面的代码段：

＆＃13;

input{
  font-size:20px;
}

.btn {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 2px;
  margin-left: 5px;
}

body {
  display: flex;
  align-items: center;
}

＆＃13;

<input>
<button class="btn btn-primary m-l">Add</button>

＆＃13;

希望这有帮助！

Answer 2

我不确定这是最好的解决方案，但你可以通过给输入一个高度，并将两个元素垂直对齐到中间来实现这一点。请参阅下面的代码段。

input{
  font-size:20px;
  height: 30px;
  vertical-align: middle;
}

.btn {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 2px;
  vertical-align: middle;
}

<input>
<button class="btn btn-primary m-l">Add</button>

Answer 3

只需将您的内容包装到.container div并将dispaly: flex应用于该内容，这应该可以为您解决问题。

＆＃13;

.container {
  display: flex;
}

input{
  font-size:20px;
  margin-right: 5px;
}

.btn {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 2px;
}

＆＃13;

<div class="container">
  <input>
  <button class="btn btn-primary m-l">Add</button>
</div>

＆＃13;

希望有帮助（y）。

如果按钮具有不同的字体大小，如何使按钮水平居中？

3 个答案: