仅使用CSS将转盘导航HTML锚定到图像底部（不使用CSS网格）

在示例图像中，我有导航。下面的示例代码显示了潜在的标记。如果图像和下面的文本需要一起移动（左右滑动），我如何仅使用CSS定位导航。我怀疑我将不得不依赖一些JavaScript而不知道元素的高度，但我宁愿不这样做

要清楚的是，这里的导航似乎居中，但它们不是。它们需要浮动在任意图像高度的底部

更新

示例代码：

这个文本内容实际上可以是任意高度，所以很遗憾，仅仅在导航上使用负边距是行不通的。
此外，图像可以是任意高度。
海龟

---

我的代码非常灵活；如果需要，我可以移动物体。

您是否尝试过使用position:relative和position:absolute（像这样）？将图像幻灯片和项目符号导航包装在一个div中，在该div中将位置设置为相对。然后将导航包装器设置为绝对位置（底部：0以将其放置在父div的底部）。由于父div的高度取决于img高度，因此即使图像发生变化，它通常也会保持在原位

.outer-div { 
  position: relative;
 }

.bullet-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* to center nav */
}

---

你的代码呢？你在寻找绝对定位元素吗？？请发布您的代码，并更好地解释您正在尝试的内容do@MariosNikolaou我很高兴发布代码，但我的描述中有什么不清楚的？请澄清它们需要浮动在任意图像高度的底部如果导航需要在中间，这非常有效，但在我的描述中，我说它需要固定在图片的底部，所以我认为这不起作用。这是伟大的，但如果它可以只是中心。

.outer-div { 
  position: relative;
 }

.bullet-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* to center nav */
}