Question

我有一张图片，当悬停在图像的中心时，一些文字将漂浮在图像的中心。

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

我尝试为0，padding等设置margin，任何可能有用的内容，但我仍然不明白它是如何以及为什么这样做的。我知道<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容器的初始设置为flex-direction: row。这意味着默认情况下，弹性项目将水平排列。

您的代码中发生了什么。 Flex容器（#hightowerText）具有多个弹性项（包括匿名弹性项）。他们将连续排队。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

div问题上的文字叠加

2 个答案: