html - 正确居中搜索字段(垂直和水平)

Question

如何在本网站的标题中正确地垂直和水平居中搜索字段？

它不仅是一个<input /> ，它是一个 <input /> ID #searchInput和右侧的麦克风图标 ( #mic ) 都包含在一个 div 中， #searchField .

目前我通过 top:50%; 将表单水平居中和一半高度的负边距顶部。然后我将 #searchInput 居中在媒体查询中具有不同的宽度。

但这似乎真的不妥，看来应该有更妥当的做法。

我试过了 position:absolute;和 left:0;和 right:0; ，但这不起作用，我相信 #searchInput 会缩小到其最小宽度。

我试过给 display:table;到标题，#header , 然后 display:table-cell;到 #searchField和 vertical-align:middle;至 #searchField ，但这似乎没有用，而且无论如何都没有得到很好的支持。

如何将 #searchField 居中？在#header在所有视口(viewport)尺寸中，并且在某种程度上，最好得到很好的支持(IE8+ 和现代浏览器)？

这是页面:https://googledrive.com/host/0BwJVaMrY8QdccGkyM0tucHZJNTA/KE_home.html

编辑:所以我相信我现在让它垂直居中，但不是水平居中。这意味着它位于 X 轴 0，但不位于 Y 轴 0。

Answer 1

这应该可以解决问题。您应该能够调整搜索容器的高度和宽度。如果您希望容器具有响应性，请使用百分比。

如果您想将搜索栏置于标题的中央，请使标题部分的位置相对。这应该适用于 IE8

#searchField{
  background: red;
  height:30px;
  width:300px;
  overflow: auto; 
  margin: auto;
  position: absolute;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
}

============================================= =====在你的情况下，我会这样做:

id 为 ="input"的部分，并使表单绝对居中。 div(#searchField) 应该是 position: relative;宽度:100%；。

您的输入 (#searchInput) 应具有以下样式:

width: 100%; margin-top: 0px; padding: 0; box-sizing: border-box;

去除输入上的背景图像。

您的提交按钮(#mic) 应具有以下样式:

position: absolute;
box-sizing: border-box;
height: 32px;
font-size: 20px;
line-height: 23px;
right: 0;

我在修复错误时覆盖了你的一些样式，看起来你可能有一些不必要的 css。建议清除您根本不需要的代码位。希望这可以帮助。最好不要将 ID 用于样式，类更适合样式，并为 JS 保留 ID 的使用。