标题中的中心搜索栏

Question

我正在尝试将搜索栏置于 WordPress 网站的标题中间。 但是，由于我使用的是现成的主题（Flatsome），因此已经制作了类，这使得定制更加困难。

问题是标题的元素使用相同的类，这意味着如果我针对一个元素，另一部分也会受到影响。

网站在这里：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 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&amp;_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&amp;_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>

Answer 1

添加此样式

.header-nav.header-nav-main.nav.nav-left.nav-uppercase {
    justify-content: center;
}

Answer 2

我使用您提供的网址检查了您网站的 HTML 结构。 我使用 Chrome 开发工具检查了哪个元素是搜索栏的主要容器。

这个元素是你的主要容器，它负责居中：
<ul class="header-nav header-nav-main nav nav-left nav-uppercase">
注意到“nav-left”类了吗？ ...将其更改为“导航中心”类。

<ul class="header-nav header-nav-main nav nav-center nav-uppercase"> 这将使您的搜索居中： https://i.imgur.com/DsyIMlX.png

您可能需要Wordpress Child Theme 来添加在更新 Wordpress 版本时不会被删除的自定义 CSS。并且您在子主题中的 CSS 可以针对该主要元素。

#header ul.header-nav-main {
 justify-content: center !important;
}

!important 是 100% 确保没有其他任何东西可以绕过您的规则的最大特异性级别。有时，Wordpress 在许多不同的文件中有很多不同的 CSS。如果您可以避免使用 !important 关键字，那就更好了。