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/

在导航栏中对齐图像两边的文本（HTML和CSS）

2 个答案: