css Flex位置-内容：space-evenually似乎放置了与页面中心距离不均匀的元素

lf5gs5x2 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(69)

我有一个网页，其中，在屏幕的垂直中心，有三个元素应该均匀放置："关于"链接、描绘N字母的徽标以及"音乐"链接。
我希望元素被均匀地放置。下面是我应用到父容器元素的CSS：

.container {
    display: flex;
    align-items: center;
    place-content: space-evenly;
    height: 100%;
    width: 100%;
    margin: auto;
}

以下是内部元素的HTML：

<div class="container">
    <a href="...">About</a>
    <img style="width: 65px; height: 65px;" src="img/n.png" />
    <a href="...">Music</a>
</div>

结果如下所示：

然而，在我看来，链接"About"和"Music"与页面中间的像素数存在一些差异，在不同的屏幕分辨率下会有所不同，但"Music"和"About"与中间"N"图像的距离差异高达5px，前者距离中间更近。
我不明白这个偏移是怎么来的，但我怀疑这可能是因为两个链接的文本宽度略有不同，而且Flex放置在距离 * 页边空白 * 相等的位置，而不是中心。
此代码演示了以下问题：https://codepen.io/samul-11/pen/jOvwWQE
如果是这样的话，我如何获得我所描述的结果，其中链接与页面中间的距离相同？

css

来源：https://stackoverflow.com/questions/75636016/flex-place-content-space-evenly-seems-to-place-elements-with-uneven-distances-f

1条答案

按热度按时间

xt0899hw1#

在这个测试用例中，所有边界之间的距离都是精确的。我检查过了，没有像素差异;）

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  font: 400 16px/1.5 sans-serif;
}
img {
  width: 65px;
  height: 65px;
  border: 0;
}
.container, a, img {
  border: thin dotted blue;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  margin: auto;
}

<div class="container">
  <a href="#">About</a>
  <img src="https://picsum.photos/id/220/65/65" alt="N" width="65" height="65">
  <a href="#">Music</a>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

css Flex位置-内容：space-evenually似乎放置了与页面中心距离不均匀的元素

1条答案

相关问题

热门标签

最新问答