Question

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

这不仅是<input />，还有<input />，ID为#searchInput，右侧的麦克风图标（#mic）全部包含在div中，{ {1}}。

目前，我将表格水平居中于#searchField，并将负边距设置为高度的一半。然后我在媒体查询中将top:50%;以不同的宽度居中。

但这似乎不合适，似乎应该有更合适的方式。

我已尝试过#searchInput和position:absolute;以及left:0;，但这并不起作用，我相信#searchInput会缩小到最小宽度。< / p>

我尝试将right:0;提供给标题display:table;，然后#header提供给display:table-cell;和#searchField至vertical-align:middle;，但是似乎没有工作，无论如何都没有得到很好的支持。

如何将#searchField中的#searchField置于所有视口大小的中心，并且最好是支持（IE8 +和现代浏览器）？ < / p>

以下是页面：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; width: 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;

我已经覆盖了你的一些风格，同时修复了bug，似乎你可能有一些不必要的CSS。它建议清理一些你根本不需要的代码。希望这可以帮助。最佳做法是不使用ID进行样式化，类更适合样式并保留使用ID的标识。

正确居中搜索范围（垂直和水平）

1 个答案: