html - 在导航栏中对齐图像两侧的文本（html和css）

Question

我想在我制作的中间导航栏中有一个图像，但右边的文本被推得很远！我该如何解决？

这是我的导航栏在 HTML 中的样子：

谢谢！

标签： htmlcssimagealignmentnavbar

Answer 1

使用 flexbox 可以很容易地实现您的要求。

我无法访问您的 CSS，所以我自己添加了一点，只是为了演示这个 codepen 的基本原理：https ://codepen.io/Ardiaz/pen/zJRKmR

这里的主要注意事项如下：

display: flex;

这会将您的元素声明为 flex 元素，从而启用 flex 中可用的 CSS 声明套件。

justify-content: space-between;

这将使您的所有元素在页面上均匀分布，图像位于中心，因为它是元素中最中心的项目。