使用搜索栏对齐项目和对齐内容[重复]答案

【问题标题】：align-items and justify-content with search bar [duplicate]使用搜索栏对齐项目和对齐内容[重复]
【发布时间】：2020-05-24 08:13:11
【问题描述】：

我试图在 html 和 css 中创建一个简单的搜索栏。但是， justify-content 和 align-items 不起作用。有人可以帮我找出原因吗？

https://codepen.io/Lavender786/pen/yLYwRBP

input[type=text] {
  width: 400px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

.container {
  align-items: center; 
  justify-content: center;
}

<div id = "container">
<form>
  <input type="text" name="search" placeholder="Search...">
</form>
</div>

【问题讨论】：

标签： html css search

【解决方案1】：

在您的代码中，表单占宽度的 100%，这就是您无法将搜索栏居中的原因。

如果您想使表单居中，您应该为表单设置一个宽度（并让栏占 100%），或者如下例所示，将表单保持在 100% 宽度并将其元素居中（我交换了@ 987654321@ 和form 并添加display:flex;)

input[type=text] {
  width: 400px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

form {
  display:flex;
  justify-content: center;
}

<div id="container">
  <form>
    <input type="text" name="search" placeholder="Search...">
  </form>
</div>

【讨论】：

【解决方案2】：

您已将 CSS 添加到容器中，但它与表单标签重叠，因此将 CSS 应用于表单而不是容器。希望对你有帮助。

【讨论】：