javascript - Div垂直对齐在Chrome上不起作用-在其他浏览器上可用

修复了一些现有代码后，两个div在Firefix / IE上可以对齐，但在Chrome上不能对齐。
尝试过使用padding，尽管将其固定在Chrome上，但在其他地方会损坏。
可能会给我一个简单的却被忽略的设置，我现在似乎无法解决这些问题。
代码：（在Firefox上效果很好，在chrome上效果不佳）
有解决此问题的技巧吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * {
    box-sizing: border-box;
  }

  body {}

  .autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
  }

  @media (max-width: 680px) {
    .autocomplete {
      /*the container must be positioned relative:*/
      position: relative;
      display: inline-block;
      width: 70% !important;
    }
  }

  input {
    border: 20px solid transparent;
    border-left: 0px solid transparent;
    background-color: #f1f1f1;
    font-size: 24px;
    border-radius: 25px 1px 1px 25px;
    display: inline-block;

  }

  @media (max-width: 680px) {
    input[type=text] {
      border: 20px solid transparent;
      border-left: 0px solid transparent;
      background-color: #f1f1f1;

      margin-left: 0px;
      font-size: 14px;
      border-radius: 25px 1px 1px 25px;
      display: inline-block;
    }
    input[type=submit] {}
  }

  input[type=text] {
    background-color: #F4F7FA;
    width: 100%;
    border: 21px solid transparent;
    border-right: 0px solid transparent;
  }

  input[type=submit] {
    background-color: #ef7023;
    color: #fff;
    cursor: pointer;
    border-radius: 1px 25px 25px 1px;
    width: 30%;
    height: 100% !important;
  }
</style>

<div style="padding-top:60px;background-color:grey;">

  <form style="padding-left:33%;padding-right:30%;">
    <div class="autocomplete" style=" max-width:67%;width:100%;">

      <input class="search" type="text">
    </div>
    <div style="display:inline-block;">

      <input value="" style="width:100px; max-width:100%;" type="submit"></div>
  </form>
</div>

最佳答案

对于inline-block元素，应在元素中添加padding-top和padding-bottom以进行垂直对齐。

将此添加到您的CSS：

form {
  padding-top: 50px;
  padding-bottom: 50px;
}

我设置了值50px，但您可以自己设置适当的值。

同时从主padding-top: 60px中删除​​div。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * {
    box-sizing: border-box;
  }

  body {}

  .autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
  }

  @media (max-width: 680px) {
    .autocomplete {
      /*the container must be positioned relative:*/
      position: relative;
      display: inline-block;
      width: 70% !important;
    }
  }

  input {
    border: 21px solid transparent;
    border-left: 0px solid transparent;
    background-color: #f1f1f1;
    font-size: 17px;
    border-radius: 25px 1px 1px 25px;
    display: inline-block;

  }

  @media (max-width: 680px) {
    input[type=text] {
      border: 20px solid transparent;
      border-left: 0px solid transparent;
      background-color: #f1f1f1;

      margin-left: 0px;
      font-size: 14px;
      border-radius: 25px 1px 1px 25px;
      display: inline-block;
    }
    input[type=submit] {}
  }

  input[type=text] {
    background-color: #F4F7FA;
    width: 100%;
    border: 21px solid transparent;
    border-right: 0px solid transparent;
  }

  input[type=submit] {
    background-color: #ef7023;
    color: #fff;
    cursor: pointer;
    border-radius: 1px 25px 25px 1px;
    width: 30%;
    height: 100% !important;
  }

form {
  padding-top:50px;
  padding-bottom: 50px;
  padding-right: 15%;
  padding-left: 15%;
}
</style>

<div style="background-color:grey;">

  <form>
    <div class="autocomplete" style=" max-width:67%;width:100%;">

      <input class="search" type="text">
    </div>
    <div style="display:inline-block;">

      <input value="" style="width:100px; max-width:100%;" type="submit"></div>
  </form>
</div>

这是垂直和水平居中元素的完整指南：centering elements complete guide

关于javascript - Div垂直对齐在Chrome上不起作用-在其他浏览器上可用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51702243/