【发布时间】：2018-06-20 06:35:30
【问题描述】：
我在 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="{"background_background":"classic","background_image":{"url":"","id":""}}" 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 并查看为什么所有菜单链接都向左对齐而不是居中。我可以用一些边距绕过它，但文本本身是左对齐的。
谢谢！
【问题讨论】：
-
.elementor-nav-menu--dropdown a { justify-content: center; } -
我添加了它，不幸的是它没有帮助。 @ManojKumar 在预览中看起来不错，但是当我在手机中查看时它仍然左对齐。
-
这是我看到的：prnt.sc/jwxcfi 你在哪里添加代码？自定义 CSS 功能？
-
试试这个 .elementor-widget-heading .elementor-heading-title > a{ justify-content: center !important;显示：弹性！重要； }
-
把它放在一个媒体查询里面：@media(min-width: 300px) and (max-width: 749px){ code above }