移动汉堡包链接由于某些原因向左对齐

Question

我已经在Wordpress网站上创建了移动汉堡菜单。出于某种原因，当我查看移动视图时，尽管我将它们居中，甚至添加了一些CSS以确保它们居中，但我可以看到所有元素都向左对齐。我不知道为什么它们不居中，我希望这里的人能够告诉我如何使它们居中。

这是菜单的HTML：

<div id="content-wrap" class="container clr">


        <div id="primary" class="content-area clr">


            <div id="content" class="site-content clr">



<article class="single-library-article clr">

    <div class="entry clr" itemprop="text">
                <div class="elementor elementor-1303 elementor-type-section">
            <div class="elementor-inner">
                <div class="elementor-section-wrap">
                            <section data-id="70032df" class="elementor-element elementor-element-70032df elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;}}" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div data-id="14d0f8d4" class="elementor-element elementor-element-14d0f8d4 elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><p dir="rtl"><span class="menu-item-text"><span align="center">מהי רגולציה?</span></span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 400;"></span></p></a></h4>       </div>
                </div>
                <div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#maya-about-mobile"><p dir="rtl"><span class="menu-item-text"><span align="center">אודות?</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span></p></a></h4>     </div>
                </div>
                <div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><p dir="rtl"><span class="menu-item-text"><span align="center">למי זה מתאים?</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span></p></a></h4>     </div>
                </div>
                <div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><p dir="rtl"><span class="menu-item-text"><span align="center">פתרונות</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span></p></a></h4>      </div>
                </div>
                <div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                <div class="elementor-widget-container">
            <h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><p dir="rtl"><span class="menu-item-text"><span align="center">צור קשר</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span></p></a></h4>       </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                        </div>
            </div>
        </div>
            </div>

</article>

            </div><!-- #content -->


        </div><!-- #primary -->



    </div>

我无法编辑此HTML，因为该网站是使用称为Elementor的实时生成器创建的，但是我可以轻松添加任何HTML，CSS或jQuery。

这是我在菜单本身上使用过的CSS：

.menu-item-text-mobile {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
margin-left:50px;
}


#who-menu-mobile:hover .menu-item-text, 
#who-menu-mobile:focus .menu-item-text, 
#who-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}
#solutions-menu-mobile:hover .menu-item-text, 
#solutions-menu-mobile:focus .menu-item-text, 
#solutions-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
}

#regulation-menu-mobile:hover .menu-item-text, 
#regulation-menu-mobile:focus .menu-item-text, 
#regulation-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; }

，您可以在此处预览移动视图-www.mayabarber.co.il，并查看为什么所有菜单链接都向左对齐而不是居中对齐。我能够略微绕开它，但是文本本身左对齐。

谢谢！

Answer 1

您在dir="rtl"上有<p>，这使文本从右到左，并且CSS样式不会覆盖该内容。

然后添加

.elementor-heading-title{
    text-align:center;
}

或您认为适合的其他任何方式将它们居中。

.menu-item-text-mobile {
  -webkit-transition: border 200ms ease-out;
  -moz-transition: border 200ms ease-out;
  -o-transition: border 200ms ease-out;
  transition: border 200ms ease-out;
  border-bottom: 2.11px solid transparent;
  border-top: 2.11px solid transparent;
  margin-left: 50px;
  text-align: center;
}

#who-menu-mobile:hover .menu-item-text,
#who-menu-mobile:focus .menu-item-text,
#who-menu-mobile:active .menu-item-text {
  border-bottom: 2.11px solid #61f6ff;
  border-top: 2.11px solid #61f6ff;
}

#solutions-menu-mobile:hover .menu-item-text,
#solutions-menu-mobile:focus .menu-item-text,
#solutions-menu-mobile:active .menu-item-text {
  border-bottom: 2.11px solid #61f6ff;
  border-top: 2.11px solid #61f6ff;
}

#regulation-menu-mobile:hover .menu-item-text,
#regulation-menu-mobile:focus .menu-item-text,
#regulation-menu-mobile:active .menu-item-text {
  border-bottom: 2.11px solid #61f6ff;
  border-top: 2.11px solid #61f6ff;
}

.elementor-heading-title {
  text-align: center;
}

<div id="content-wrap" class="container clr">
  <div id="primary" class="content-area clr">
    <div id="content" class="site-content clr">
      <article class="single-library-article clr">
        <div class="entry clr" itemprop="text">
          <div class="elementor elementor-1303 elementor-type-section">
            <div class="elementor-inner">
              <div class="elementor-section-wrap">
                <section data-id="70032df" class="elementor-element elementor-element-70032df elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;background_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;}}"
                  data-element_type="section">
                  <div class="elementor-container elementor-column-gap-default">
                    <div class="elementor-row">
                      <div data-id="14d0f8d4" class="elementor-element elementor-element-14d0f8d4 elementor-column elementor-col-100 elementor-top-column" data-element_type="column">
                        <div class="elementor-column-wrap elementor-element-populated">
                          <div class="elementor-widget-wrap">
                            <div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                              <div class="elementor-widget-container">
                                <h4 class="elementor-heading-title elementor-size-default">
                                  <a href="#regulation-mobile">
                                    <p><span class="menu-item-text"><span align="center">מהי רגולציה?</span></span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 400;"></span></p>
                                  </a>
                                </h4>
                              </div>
                            </div>
                            <div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                              <div class="elementor-widget-container">
                                <h4 class="elementor-heading-title elementor-size-default">
                                  <a href="#maya-about-mobile">
                                    <p><span class="menu-item-text"><span align="center">אודות?</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span>
                                    </p>
                                  </a>
                                </h4>
                              </div>
                            </div>
                            <div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
                              <div class="elementor-widget-container">
                                <h4 class="elementor-heading-title elementor-size-default">
                                  <a href="#fit-mobile">
                                    <p><span class="menu-item-text"><span align="center">למי זה מתאים?</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span>
                                    </p>
                                  </a>
                                </h4>
                              </div>
                            </div>
                            <div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                              <div class="elementor-widget-container">
                                <h4 class="elementor-heading-title elementor-size-default">
                                  <a href="#solution-mobile">
                                    <p><span class="menu-item-text"><span align="center">פתרונות</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span>
                                    </p>
                                  </a>
                                </h4>
                              </div>
                            </div>
                            <div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
                              <div class="elementor-widget-container">
                                <h4 class="elementor-heading-title elementor-size-default">
                                  <a href="#contact-mobile">
                                    <p><span class="menu-item-text"><span align="center">צור קשר</span><span style="font-family: Heebo, sans-serif; font-size: 1.688em; font-weight: 500;"></span></span>
                                    </p>
                                  </a>
                                </h4>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
    <!-- #content -->
  </div>
  <!-- #primary -->
</div>