在导航栏(html 和 css)中对齐图像两侧的文本

Question

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

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

谢谢！

Answer 1

你所要求的东西可以很容易地用flexbox实现。

我无法访问您的 CSS，所以我自己添加了一些内容，只是为了演示此代码笔中的基本原则：https://codepen.io/Ardiaz/pen/zJRKmR

这里的主要说明如下：

display: flex;

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

justify-content: space-between;

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

Answer 2

这可以通过flexbox轻松完成，只需在下面的代码中将"#logo"替换为您的图像即可。

.HTML：

<nav>
<a href="">Home</a>
<a href="">Artwork</a>
<div id="logo"></div>
<a href="">Responses</a>
<a href="">Contact</a>
</nav>

.CSS：

html, body{
height: 100%;
}
body{
margin: 0;
}
nav{
display: flex;
width: 100%;
height: 20%;
background: #eee;
align-items: center;
justify-content: center;
}
a{
text-decoration: none;
color: rgba(0,0,0,0.8);
margin: 0 40px;
}
#logo{
width: 200px;
height: 100%;
background: rgba(0,0,0,0.3);
}

结果：https://jsfiddle.net/3L7b94fr/