Question

修复了一些现有代码后，两个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>

Answer 1

对于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

Answer 2

如果您想要理想的垂直对齐方式，请尝试使用flex-box

.parent{
display: flex;
height: 500px;
background: #666666;
}
.child{ 
background: #c5c5c5;
height: 100px;
width: 100px;
margin: 10px;
}
.child:nth-child(1) {
align-self: center;
}

<div class="parent">
<div class="child">centered</div>
<div class="child">not centered</div>
</div>

应该可以

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

2 个答案: