不能在div中居中垂直使用chrome中的line-heigth

Question

我想使用道具line-height和height垂直居中于一个div中的文字输入。

以下是较少的代码段：

div.header {
  background-color: #6283E6;
  height: 70px;
  line-height: 70px;
  min-width: 1220px;

  input.search-input {
    border: none;
    border-radius: 16px;
    background-color: #C9D4F6;
    background-image:url('../assets/search.png');
    background-repeat: no-repeat;
    background-position: 14px, center;

    height: 30px;
    width: 353px;
    padding-left: 49px;
  }
}

但是铬的实际效果如下：

为什么会发生这种情况。

你能告诉我吗？

下面是我的Jsx代码，Header只有一个父节点，而这个节点是根节点。

class Header extends React.Component {
  render() {
    return (
      <div className={style.header}>
        <input type="text" className={style['search-input']} />
      </div>
    );
  }
}

Answer 1

我测试了你的代码，对我来说似乎很好：

＆＃13;

＆＃13;

 div.header {background-color: #6283E6;
  height: 70px;
  line-height: 70px;
  min-width: 1220px;
}

input.search-input {
    border: none;
    border-radius: 16px;
    background-color: #C9D4F6;
    background-image:url('../assets/search.png');
    background-repeat: no-repeat;
    background-position: 14px, center;

    height: 30px;
    width: 353px;
    padding-left: 49px;
  }

＆＃13;

  <div class="header">
  <input type="text" class="search-input">
  </div>

＆＃13;

＆＃13;

＆＃13;

代码中一定有其他错误，你没有告诉我们。

记住div和输入有默认的边距和填充，所以将两者的边距和填充设置为0.

备选方案：

• 您可以在顶部和底部使用填充，而不是固定高度。
• 您可以使用flex。