javascript - Div 垂直对齐不适用于 Chrome - 适用于其他浏览器

Question

修复一些现有代码，两个 div 在 Firefix/IE 上对齐正常，但在 Chrome 上不对齐。尝试过填充，虽然在 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>

Answer 1

对于 inline-block 元素，您应该添加 padding-top 和 padding-bottom 到您的元素以实现垂直对齐。

将此添加到您的 CSS 中:

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

我设置的值是50px，但是你可以自己设置合适的值。

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

<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