div 问题上的文本叠加

Question

我有一个图像，当悬停在图像上时，一些文本会漂浮在图像的中心。

我可以让它在<p>内用单个文本块正确浮动，
但是当我在<p>中添加<a>或其他东西时，它似乎想将<a>缩进到右侧，从而将以前的文本向左推。

我已经尝试为padding、margin等设置0，任何可能有帮助的东西，但我仍然不明白它是如何以及为什么这样做的。我知道一件事，<a>不是块级元素，因此将其设置为 inline 不会做任何事情......嗯，有人吗？

实时版本可在 http://g4stly.com/servers.html
(将鼠标悬停在图像上(

我的代码如下：

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}
#hightowerWrapper {
  display: inline-block;
  position: relative;
}
#hightowerText {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}
#hightowerText a {
  display: inline;
}
#hightowerText p {
  padding: 0;
  margin: 0;
}
#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}

<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">
    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>

Answer 1

看起来您的副本(文本、链接等(不在 p 标签中。将其放入单个元素中是有效的。请参阅下面的小提琴。

<div id="hightowerWrapper">
    <a href="#" id="hightowerA">
        <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">
        <div id="hightowerText">
            <p>
      Hightower!
                Classic plr_hightower map!<br>
                IP Address: hightower.g4stly.com<br>
        Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
          </p>
        </div>
    </a>
</div>

https://jsfiddle.net/35mu07ts/

Answer 2

弹性容器的初始设置为 flex-direction: row 。这意味着默认情况下，弹性项目将水平排列。

这就是代码中发生的情况。弹性容器(#hightowerText(有多个弹性项目(包括匿名弹性项目(。他们将排成一排。

使用容器上的flex-direction: column覆盖默认值。

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}
#hightowerWrapper {
  display: inline-block;
  position: relative;
}
#hightowerText {
  flex-direction: column; /* NEW */
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}
#hightowerText a {
  display: inline;
}
#hightowerText p {
  padding: 0;
  margin: 0;
}
#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}

<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">
    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>