如何通过CSS调整WooCommerce Storefront主题头部列布局使搜索栏居中

我有一个WordPress电商网站，当前页面顶部右侧设有搜索栏，希望将其移至页面中央，请问如何通过CSS调整头部内的列顺序？

简化示例代码 #

CSS 代码：

header {
  width: 100%;
  background-color: firebrick;
  display: flex;
}

.logo,
.search{
  width: 25%;
}
.nav {
  width: 50%;
}

HTML 结构：

<header>
  <div class="logo">
    <p>logo</p>
  </div>
  <div class="nav">
    <p>Home contact ...</p>
  </div>
  <div class="search">
    <input type="text" placeholder="search">
  </div>
</header>

当前效果 #

期望效果 #

解决方案：利用Flexbox的order属性调整元素顺序 #

你的header已经使用display: flex布局，可通过order属性重新排列内部元素的显示顺序，配合宽度调整和对齐设置，实现搜索栏居中的需求：

header {
  width: 100%;
  background-color: firebrick;
  display: flex;
}

.logo {
  width: 25%;
  order: 1; /* 固定在最左侧 */
}

.search {
  width: 50%; /* 占据中间50%的页面宽度 */
  order: 2; /* 放在logo之后、nav之前 */
  display: flex;
  justify-content: center; /* 让搜索框在自身容器内水平居中 */
  align-items: center; /* 垂直居中（可选，根据布局需求调整） */
}

.nav {
  width: 25%;
  order: 3; /* 固定在最右侧 */
  display: flex;
  justify-content: flex-end; /* 让导航内容靠右对齐 */
  align-items: center; /* 垂直居中（可选） */
}

关键说明：

• order属性默认值为0，数值越小元素排列越靠前，通过给三个元素设置不同的order值，即可改变它们在flex容器中的显示顺序。
• 将.search宽度调整为50%，让它占据页面中间的核心区域，再用justify-content: center确保搜索框在容器内居中，匹配视觉上的居中效果。
• 给.nav添加justify-content: flex-end，让导航内容靠右对齐，贴合期望的布局样式。

如果仅需交换nav和search的位置、不调整宽度，可直接修改order值：

.search {
  order: 2;
}

.nav {
  order: 3;
}

（注：此时.search仍为25%宽度，会位于logo右侧、nav左侧，可额外添加justify-content: center让搜索框在自身容器内居中，优化视觉效果）

内容的提问来源于stack exchange，提问作者Prabhu Paul