html - 无法在 div 中垂直居中，在 chrome 中使用行高

Question

我想使用属性 line-height 和 height 在一个 div 中垂直居中文本输入。

下面是less的代码片段:

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;
  }
}

但chrome中的实际效果如下:

那么为什么会这样。

你能告诉我吗？

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

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

Answer 1

我测试了你的代码，我觉得没问题:

 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;
  }

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

代码中一定有其他错误，您没有向我们展示。

记住 div 和 input 有默认的 margin 和 padding，所以将两者的 margin 和 padding 设置为 0。

备选方案:

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