在 header 中居中搜索栏
Center searchbar in header
我试图在我的 WordPress 网站中将搜索栏居中放置在 header 的中间。
但是，由于我使用的是 ready-made 主题 (Flatsome)，类 已经制作完成，这使得自定义变得更加困难。
问题是 header 的元素使用相同的 类，这意味着如果我以一个元素为目标，另一部分也会受到影响。
网址在这里：toolstrading.se
我一直在使用下面的代码。
.nav-uppercase {
text-align: center;
float: none;
display: inline-block;
margin-left: -30px;
}
As you can see, the elements on the right get affected by the CSS change
感谢我能得到的所有帮助，因为我被这个弄疯了。
谢谢！
编辑
这是整个 header 块。
<header id="header" class="header has-sticky sticky-jump">
<div class="header-wrapper">
<div id="masthead" class="header-main nav-dark">
<div class="header-inner flex-row container logo-left medium-logo-center" role="navigation">
<!-- Logo -->
<div id="logo" class="flex-col logo">
<!-- Header logo -->
<a href="https://toolstrading.se/" title="Scandinavian Tools - Din helhetsleverantör av verktyg" rel="home">
<img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header_logo header-logo" alt="Scandinavian Tools"><img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header-logo-dark" alt="Scandinavian Tools"></a>
</div>
<!-- Mobile Left Elements -->
<div class="flex-col show-for-medium flex-left">
<ul class="mobile-nav nav nav-left ">
<li class="nav-icon has-icon">
<a href="#" data-open="#main-menu" data-pos="right" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
<i class="icon-menu"></i>
</a>
</li> </ul>
</div>
<!-- Left Elements -->
<div class="flex-col hide-for-medium flex-left
flex-grow">
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
<!-- Right Elements -->
<div class="flex-col hide-for-medium flex-right">
<ul class="header-nav header-nav-main nav nav-right nav-uppercase">
<li class="account-item has-icon
has-dropdown">
<a href="https://toolstrading.se/my-account/" class="account-link account-login
" title="Mitt konto">
<span class="header-account-title">
Admin </span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
<a href="https://toolstrading.se/my-account/">Kontopanel</a>
<!-- empty -->
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
<a href="https://toolstrading.se/my-account/orders/">Beställningar</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
<a href="https://toolstrading.se/my-account/downloads/">Nedladdningar</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
<a href="https://toolstrading.se/my-account/edit-address/">Adresser</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
<a href="https://toolstrading.se/my-account/edit-account/">Kontouppgifter</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
<a href="https://toolstrading.se/my-account/customer-logout/">Logga ut</a>
</li>
</ul>
</li>
<li class="header-divider"></li><li class="cart-item has-icon has-dropdown">
<a href="https://toolstrading.se/cart/" title="Varukorg" class="header-cart-link is-small">
<span class="header-cart-title">
<span class="cart-price"><span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>
</span>
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="html widget_shopping_cart">
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a> <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile Right Elements -->
<div class="flex-col show-for-medium flex-right">
<ul class="mobile-nav nav nav-right ">
<li class="cart-item has-icon">
<a href="https://toolstrading.se/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Varukorg" data-pos="right">
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<!-- Cart Sidebar Popup -->
<div id="cart-popup" class="mfp-hide widget_shopping_cart">
<div class="cart-popup-inner inner-padding">
<div class="cart-popup-title text-center">
<h4 class="uppercase">Varukorg</h4>
<div class="is-divider"></div>
</div>
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a> <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>
</div>
<div class="cart-sidebar-content relative"></div> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="container"><div class="top-divider full-width"></div></div>
</div><div id="wide-nav" class="header-bottom wide-nav nav-dark flex-has-center">
<div class="flex-row container">
<div class="flex-col hide-for-medium flex-left">
<ul class="nav header-nav header-bottom-nav nav-left nav-size-medium nav-spacing-xlarge">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-30 active menu-item-design-default"><a href="https://toolstrading.se/" aria-current="page" class="nav-top-link">Hem</a></li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 menu-item-design-default"><a href="https://toolstrading.se/webbshop/" class="nav-top-link">Webbshop</a></li>
<li id="menu-item-48410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48410 menu-item-design-default"><a href="https://toolstrading.se/erbjudanden/" class="nav-top-link">Erbjudanden</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64 menu-item-design-default"><a href="https://toolstrading.se/leasing/" class="nav-top-link">Leasing</a></li>
</ul>
</div>
<div class="flex-col hide-for-medium flex-center">
<ul class="nav header-nav header-bottom-nav nav-center nav-size-medium nav-spacing-xlarge">
</ul>
</div>
<div class="flex-col hide-for-medium flex-right flex-grow">
<ul class="nav header-nav header-bottom-nav nav-right nav-size-medium nav-spacing-xlarge">
<li class="html header-button-1">
<div class="header-button">
<a href="http://partytent.se" class="button secondary" style="border-radius:99px;">
<span>Letar du efter tält och tillbehör?</span>
</a>
</div>
</li>
</ul>
</div>
<div class="flex-col show-for-medium flex-grow">
<ul class="nav header-bottom-nav nav-center mobile-nav nav-size-medium nav-spacing-xlarge">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-1">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-1" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
</div>
</div>
<div class="header-bg-container fill"><div class="header-bg-image fill"></div><div class="header-bg-color fill"></div></div> </div>
</header>
我根据您提供的 url 检查了您网站的 HTML 结构。
使用 Chrome 开发工具，我检查了哪个元素是搜索栏的主要容器。
这个元素是你的主要容器，它负责居中：
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
注意到 class “nav-left”了吗？ ...将其更改为 class“导航中心”。
<ul class="header-nav header-nav-main nav nav-center nav-uppercase">
这将使您的搜索居中：
https://i.imgur.com/DsyIMlX.png
您可能需要 Wordpress Child Theme 来添加自定义 CSS，当您更新您的 Wordpress 版本时，这些自定义 CSS 不会被删除。子主题中的 CSS 可以针对该主要元素。
#header ul.header-nav-main {
justify-content: center !important;
}
!important 是一个特异性最高级别，可以 100% 确保没有其他任何内容可以绕过您的规则。有时 Wordpress 在许多不同的文件中有很多不同的 CSS。如果你能避免使用 !important 关键字，那就更好了。
添加此样式
.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
justify-content: center;
}
我试图在我的 WordPress 网站中将搜索栏居中放置在 header 的中间。 但是，由于我使用的是 ready-made 主题 (Flatsome)，类 已经制作完成，这使得自定义变得更加困难。
问题是 header 的元素使用相同的 类，这意味着如果我以一个元素为目标，另一部分也会受到影响。
网址在这里：toolstrading.se
我一直在使用下面的代码。
.nav-uppercase {
text-align: center;
float: none;
display: inline-block;
margin-left: -30px;
}
As you can see, the elements on the right get affected by the CSS change
感谢我能得到的所有帮助，因为我被这个弄疯了。
谢谢！
编辑
这是整个 header 块。
<header id="header" class="header has-sticky sticky-jump">
<div class="header-wrapper">
<div id="masthead" class="header-main nav-dark">
<div class="header-inner flex-row container logo-left medium-logo-center" role="navigation">
<!-- Logo -->
<div id="logo" class="flex-col logo">
<!-- Header logo -->
<a href="https://toolstrading.se/" title="Scandinavian Tools - Din helhetsleverantör av verktyg" rel="home">
<img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header_logo header-logo" alt="Scandinavian Tools"><img width="162" height="100" src="https://toolstrading.se/wp-content/uploads/toolstrading-1-2-1-6.png" class="header-logo-dark" alt="Scandinavian Tools"></a>
</div>
<!-- Mobile Left Elements -->
<div class="flex-col show-for-medium flex-left">
<ul class="mobile-nav nav nav-left ">
<li class="nav-icon has-icon">
<a href="#" data-open="#main-menu" data-pos="right" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
<i class="icon-menu"></i>
</a>
</li> </ul>
</div>
<!-- Left Elements -->
<div class="flex-col hide-for-medium flex-left
flex-grow">
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
<!-- Right Elements -->
<div class="flex-col hide-for-medium flex-right">
<ul class="header-nav header-nav-main nav nav-right nav-uppercase">
<li class="account-item has-icon
has-dropdown">
<a href="https://toolstrading.se/my-account/" class="account-link account-login
" title="Mitt konto">
<span class="header-account-title">
Admin </span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
<a href="https://toolstrading.se/my-account/">Kontopanel</a>
<!-- empty -->
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders">
<a href="https://toolstrading.se/my-account/orders/">Beställningar</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads">
<a href="https://toolstrading.se/my-account/downloads/">Nedladdningar</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address">
<a href="https://toolstrading.se/my-account/edit-address/">Adresser</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account">
<a href="https://toolstrading.se/my-account/edit-account/">Kontouppgifter</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout">
<a href="https://toolstrading.se/my-account/customer-logout/">Logga ut</a>
</li>
</ul>
</li>
<li class="header-divider"></li><li class="cart-item has-icon has-dropdown">
<a href="https://toolstrading.se/cart/" title="Varukorg" class="header-cart-link is-small">
<span class="header-cart-title">
<span class="cart-price"><span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span>
</span>
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<ul class="nav-dropdown nav-dropdown-default">
<li class="html widget_shopping_cart">
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a> <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- Mobile Right Elements -->
<div class="flex-col show-for-medium flex-right">
<ul class="mobile-nav nav nav-right ">
<li class="cart-item has-icon">
<a href="https://toolstrading.se/cart/" class="header-cart-link off-canvas-toggle nav-top-link is-small" data-open="#cart-popup" data-class="off-canvas-cart" title="Varukorg" data-pos="right">
<span class="cart-icon image-icon">
<strong>1</strong>
</span>
</a>
<!-- Cart Sidebar Popup -->
<div id="cart-popup" class="mfp-hide widget_shopping_cart">
<div class="cart-popup-inner inner-padding">
<div class="cart-popup-title text-center">
<h4 class="uppercase">Varukorg</h4>
<div class="is-divider"></div>
</div>
<div class="widget_shopping_cart_content">
<ul class="woocommerce-mini-cart cart_list product_list_widget ">
<li class="woocommerce-mini-cart-item mini_cart_item">
<a href="https://toolstrading.se/cart/?remove_item=8122ef54f9a0f27ec5fd1ffa42d171fd&_wpnonce=6fcc4c7b27" class="remove remove_from_cart_button" aria-label="Ta bort den här artikeln" data-product_id="48304" data-cart_item_key="8122ef54f9a0f27ec5fd1ffa42d171fd" data-product_sku="SIN-SS-WT6">×</a> <a href="https://toolstrading.se/product/handduk-300-x-300-mm800-gr-for-mikrofiberbiltvatt-for-biltvatt-utrustning-sin-ss-wt6/">
<img width="300" height="300" src="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy" srcset="https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-300x300.jpg 300w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-150x150.jpg 150w, https://toolstrading.se/wp-content/uploads/SIN-SS-WT6-100x100.jpg 100w" sizes="(max-width: 300px) 100vw, 300px">Handduk 300 x 300 mm800 gr för mikrofiberbiltvätt för biltvätt utrustning# SIN-SS-WT6 </a>
<span class="quantity">1 × <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span></span> </li>
</ul>
<p class="woocommerce-mini-cart__total total">
<strong>Delsumma:</strong> <span class="woocommerce-Price-amount amount"><bdi>30.00<span class="woocommerce-Price-currencySymbol">kr</span></bdi></span> </p>
<p class="woocommerce-mini-cart__buttons buttons"><a href="https://toolstrading.se/cart/" class="button wc-forward">Visa varukorg</a><a href="https://toolstrading.se/checkout/" class="button checkout wc-forward">Till kassan</a></p>
</div>
<div class="cart-sidebar-content relative"></div> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="container"><div class="top-divider full-width"></div></div>
</div><div id="wide-nav" class="header-bottom wide-nav nav-dark flex-has-center">
<div class="flex-row container">
<div class="flex-col hide-for-medium flex-left">
<ul class="nav header-nav header-bottom-nav nav-left nav-size-medium nav-spacing-xlarge">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-28 current_page_item menu-item-30 active menu-item-design-default"><a href="https://toolstrading.se/" aria-current="page" class="nav-top-link">Hem</a></li>
<li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 menu-item-design-default"><a href="https://toolstrading.se/webbshop/" class="nav-top-link">Webbshop</a></li>
<li id="menu-item-48410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48410 menu-item-design-default"><a href="https://toolstrading.se/erbjudanden/" class="nav-top-link">Erbjudanden</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64 menu-item-design-default"><a href="https://toolstrading.se/leasing/" class="nav-top-link">Leasing</a></li>
</ul>
</div>
<div class="flex-col hide-for-medium flex-center">
<ul class="nav header-nav header-bottom-nav nav-center nav-size-medium nav-spacing-xlarge">
</ul>
</div>
<div class="flex-col hide-for-medium flex-right flex-grow">
<ul class="nav header-nav header-bottom-nav nav-right nav-size-medium nav-spacing-xlarge">
<li class="html header-button-1">
<div class="header-button">
<a href="http://partytent.se" class="button secondary" style="border-radius:99px;">
<span>Letar du efter tält och tillbehör?</span>
</a>
</div>
</li>
</ul>
</div>
<div class="flex-col show-for-medium flex-grow">
<ul class="nav header-bottom-nav nav-center mobile-nav nav-size-medium nav-spacing-xlarge">
<li class="header-search-form search-form html relative has-icon">
<div class="header-search-form-wrapper">
<div class="searchform-wrapper ux-search-box relative form-flat is-normal"><form role="search" method="get" class="searchform" action="https://toolstrading.se/">
<div class="flex-row relative">
<div class="flex-col flex-grow">
<label class="screen-reader-text" for="woocommerce-product-search-field-1">Sök efter:</label>
<input type="search" id="woocommerce-product-search-field-1" class="search-field mb-0" placeholder="Sök i vårt enorma sortiment" value="" name="s" autocomplete="off">
<input type="hidden" name="post_type" value="product">
</div>
<div class="flex-col">
<button type="submit" value="Sök" class="ux-search-submit submit-button secondary button icon mb-0" aria-label="Submit">
<i class="icon-search"></i> </button>
</div>
</div>
<div class="live-search-results text-left z-top"><div class="autocomplete-suggestions" style="position: absolute; display: none; max-height: 300px; z-index: 9999;"></div></div>
</form>
</div> </div>
</li> </ul>
</div>
</div>
</div>
<div class="header-bg-container fill"><div class="header-bg-image fill"></div><div class="header-bg-color fill"></div></div> </div>
</header>
我根据您提供的 url 检查了您网站的 HTML 结构。 使用 Chrome 开发工具，我检查了哪个元素是搜索栏的主要容器。
这个元素是你的主要容器，它负责居中：
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
注意到 class “nav-left”了吗？ ...将其更改为 class“导航中心”。
<ul class="header-nav header-nav-main nav nav-center nav-uppercase">
这将使您的搜索居中：
https://i.imgur.com/DsyIMlX.png
您可能需要 Wordpress Child Theme 来添加自定义 CSS，当您更新您的 Wordpress 版本时，这些自定义 CSS 不会被删除。子主题中的 CSS 可以针对该主要元素。
#header ul.header-nav-main {
justify-content: center !important;
}
!important 是一个特异性最高级别，可以 100% 确保没有其他任何内容可以绕过您的规则。有时 Wordpress 在许多不同的文件中有很多不同的 CSS。如果你能避免使用 !important 关键字，那就更好了。
添加此样式
.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
justify-content: center;
}