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

我在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>

在这里，您可以预览移动视图，并了解为什么所有菜单链接都向左对齐，而不是居中对齐。我可以用一些页边空白绕过它，但文本本身是左对齐的

谢谢

在

上有

dir=“rtl”

，它使文本从右向左移动，css样式不会覆盖这一点

然后加上

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

或者你认为合适的任何其他方式使它们居中

。菜单项text mobile{
-webkit过渡：边界200ms放松；
-moz过渡：边界200ms放松；
-o型过渡：边界200ms放松；
过渡：边界200ms放松；
边框底部：2.11px实心透明；
边框顶部：2.11px实心透明；
左边距：50像素；
文本对齐：居中；
}
#谁菜单移动：悬停。菜单项文本，
#谁的菜单移动：焦点。菜单项文本，
#谁的菜单移动：活动。菜单项文本{
边框底部：2.11px实心#61f6ff；
边框顶部：2.11px实心#61f6ff；
}
#解决方案菜单移动：悬停。菜单项文本，
#解决方案菜单移动：焦点。菜单项文本，
#解决方案菜单移动：活动。菜单项文本{
边框底部：2.11px实心#61f6ff；
边框顶部：2.11px实心#61f6ff；
}
#规则菜单移动：悬停。菜单项文本，
#规则菜单移动：焦点。菜单项文本，
#移动调节菜单：激活。菜单项文本{
边框底部：2.11px实心#61f6ff；
边框顶部：2.11px实心#61f6ff；
}
.elementor标题标题{
文本对齐：居中；
}

.elementor导航菜单--下拉一个{justify content:center；}

我添加了它，不幸的是它没有帮助@ManojKumar在预览中看起来不错，但当我在手机中查看它时，它仍然是左对齐的。这就是我看到的：你在哪里添加代码？自定义CSS功能？试试这个。elementor小部件标题。elementor标题标题>a{justify content:center！important；display:flex！important；}把它放在媒体查询中：@media（最小宽度：300px）和（最大宽度：749px）{上面的代码}谢谢。现在我可以看到，在菜单中的链接下面，我插入的电话号码和图标断开，不再保持在同一行。你能告诉我为什么吗？我不明白你的意思，你能试着，再解释一遍吗，也许再加上一张这个问题的图片。我也不明白这个新问题。但最好是为这个问题提出一个新的问题。

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