通过 flexbox 布局，将容器设为 `display: flex` 并配合 `justify-content: center` 与 `margin-left: auto`，可实现左侧导航栏绝对水平居中、右侧图标紧贴其右且不破坏居中效果。
在 Elementor（或任何现代前端场景）中，要让一个导航菜单严格水平居中，同时在其右侧紧邻显示一个 Instagram 图标容器（如社交按钮），且两者位于同一行——关键在于：不能靠浮动（float）、不能依赖固定宽度、也不能用 text-align: center 配合 inline-block（易受父容器宽度和空格影响）。
✅ 推荐方案：Flexbox 容器 + 自动外边距（margin-left: auto）
<div class="header-nav-container">
<nav class="main-menu"> <!-- 此元素将被精确居中 -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
</ul>
</nav>
<div class="social-icon instagram">
<a href="https://instagram.com/..." aria-label="Instagram">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.048-1.067-.06-1.407-.06-4.123v-.08c0-2.643.012-2.987.06-4.043.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.526c.636-.247 1.363-.416 2.427-.465 1.067-.048 1.407-.06 4.123-.06h.08z"/><path d="M12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"/></svg>
</a>
</div>
</div>.header-nav-container {
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平方向整体居中 */
height: 60px; /* 可选：设定高度便于垂直对齐 */
}
.main-menu {
/* 菜单本身无需设置宽度，flex 默认收缩内容 */
/* 居中逻辑由父容器控制 */
}
.social-icon {
margin-left: auto; /* 关键！将右侧图标“推”到菜单右侧，且不干扰菜单的居中计算 */
margin-right: 0;
}? 核心原理说明：
- justify-content: center 使所有子元素整体居中；
- 但若两个子元素都默认排列，菜单会随图标位置偏移；
- 加上 .social-icon { margin-left: auto } 后，浏览器会将剩余空间全部分配给该元素左侧外边距 → 图标被“挤”到最右，而菜单自然回到容器正中心，完美解耦布局与定位。
⚠️ 注意事项：
- 不要给 .main-menu 设置 width: 100% 或 flex: 1，否则它会撑满可用空间，失去居中意义；
- 在 Elementor 中，建议将整个结构封装在「自定义 HTML」小工具或「HTML」区块中，并添加上述 CSS 到主题附加 CSS 或 Elementor 的「自定义 CSS」区域；
- 如需响应式适配（如移动端隐藏图标），可结合 @media 查询控制 .social-icon { display: none }。
✅ 总结：Flexbox 的 justify-content: center + margin-left: auto 是解决「一主一辅同线布局且主元素绝对居中」问题的现代、健壮、语义清晰的标准方案。
