Html 如何将搜索输入和提交按钮与页面中心对齐？

对不起，我知道这是超基本的，但我整天都在看我的编码参考书，我觉得我的脑子有点乱。我需要将输入字段和“提交”按钮放在一行中，在页面的中心，类似于Google

.logo{
宽度：50%；
显示：块；
保证金：自动；
}
.输入字段{
填充：3%；
宽度：40%；
显示：块；
保证金：自动；
字体大小：90%；
}
.提交{
填充：3%；
宽度：15%；
}

---

您看到的是

显示：块的默认行为

使用
display:inline block
将使它们成为块元素，以便您可以添加填充等，但使它们成为内联的，以便它们显示在彼此旁边（假设它们合适，并且其他样式不会更改默认行为）

只需将CSS中的显示从
block
更改为
inline block
，如下所示：

.input-fields {
    [...]
    display:inline-block;
}

工作片段：


.logo{宽度：50%；显示：块；边距：自动；}
.输入字段{
填充：3%；
宽度：40%；
显示：内联块；/*将此从块更改为内联块*/
垂直对齐：中间；/*这将有助于解决任何垂直对齐问题*/
保证金：自动；
字体大小：90%；
}
.提交{
填充：3%；
宽度：15%；
} 
/*将此项添加到输入的中心-
您在HTML中包含了“中心”类，但在CSS中没有*/
.center{text align:center}
您看到的是
显示：块的默认行为

使用
display:inline block
将使它们成为块元素，以便您可以添加填充等，但使它们成为内联的，以便它们显示在彼此旁边（假设它们合适，并且其他样式不会更改默认行为）

只需将CSS中的显示从
block
更改为
inline block
，如下所示：

.input-fields {
    [...]
    display:inline-block;
}

工作片段：


.logo{宽度：50%；显示：块；边距：自动；}
.输入字段{
填充：3%；
宽度：40%；
显示：内联块；/*将此从块更改为内联块*/
垂直对齐：中间；/*这将有助于解决任何垂直对齐问题*/
保证金：自动；
字体大小：90%；
}
.提交{
填充：3%；
宽度：15%；
} 
/*将此项添加到输入的中心-
您在HTML中包含了“中心”类，但在CSS中没有*/
.center{text align:center}

您缺少一个

display: inline-block;

在要在线中显示的图元上。您当前有“display:block；”这将把元素推到自己的线上

您可能还需要：

vertical-align: middle;

使它们彼此垂直对齐

要确保它们都保持在页面的中心位置，请将它们全部放在一个容器中（或仅使用现有的表单容器），并按如下方式设置样式：

position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;

这将确保无论屏幕大小是容器在中间都是垂直和水平的。 您缺少一个
display: inline-block;

在要在线中显示的图元上。您当前有“display:block；”这将把元素推到自己的线上

您可能还需要：

vertical-align: middle;

使它们彼此垂直对齐

要确保它们都保持在页面的中心位置，请将它们全部放在一个容器中（或仅使用现有的表单容器），并按如下方式设置样式：

position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;

这将确保无论屏幕大小是容器在中间都是垂直和水平的。 谷歌将其垂直和水平对齐，因此您应该尝试类似的方法（简化版）：

*{margin:0；padding:0；框大小：border-box}
html，正文{宽度：100vw；高度：100vh}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.让我对齐{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.align me>.form wrapper>.center{
显示器：flex；
}
谷歌将其垂直和水平对齐，因此您应该尝试类似的方法（简化版）：


*{margin:0；padding:0；框大小：border-box}
html，正文{宽度：100vw；高度：100vh}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.让我对齐{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.align me>.form wrapper>.center{
显示器：flex；
}

您正在使用默认为该行为的
显示：块。尝试使用默认为此行为的
display:inline block
。尝试
display:inline block
但是，该块与“margin:auto”一起用于使div集中化。。。如果我将其显示为“内联块”，搜索框将返回到页面的左侧，并且根本不居中。这就是为什么我不知道如何将输入字段和按钮放在一行，在页面的中心…@ArabianMaiden我不明白这个问题？如果您运行代码段，它将根据您的问题按预期工作。你到底需要它做什么来改变呢？嗯……你说得对。虽然我的浏览器（使用Chrome）将其堆叠起来。我刚在IE和Opera中试过，它没有集中输入…@ArabianMaiden它在Chrome、IE11、Edge和FF中对我很好。您能否显示该问题的屏幕抓图以及该问题所在的操作系统和浏览器的确切详细信息？很难解决一个我们无法重新创建的问题：）@ArabianMaiden“该块与“margin:auto”一起使用，以使div集中…如果我将其显示为“inline block”。。。您正在将div更改为inline块吗？这是不正确的-根据我的答案示例，您只更改输入。或者如果您在y中有其他样式