Question

我尝试在图片中添加一些工具提示，但没有找到任何方法将此工具提示置于图像上方。用left: -50%;尝试了一些解决方案/想法，但这些都没有成功。问题是，工具提示本身具有动态宽度/高度。

＆＃13;

div#garden_left {
  font-size: 0.7em;
  font-family: Verdana;
  height: 100%;
  width: 100%;
}
h5 {
  color: black;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
figure {
  margin: 0;
  padding: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}
figure#lawn_mower {
  bottom: 0;
  position: absolute;
  right: 50%;
}
figure#lawn_mower img {
  height: auto;
  width: 50%;
}
figcaption {
  background: lightgray;
  border: 1px solid dimgray;
  border-radius: 0.2vw;
  bottom: 120%;
  font-size: 1.1em;
  height: auto;
  margin: 0;
  opacity: 0;
  padding: 0.2vw 0.6vw;
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  width: auto;
  z-index: 1;
}
figcaption::after {
  border-color: black transparent transparent transparent;
  border-style: solid;
  border-width: 8px;
  content: "";
  left: 50%;
  margin-left: -8px;
  position: absolute;
  top: 100%;
}
figure:hover figcaption {
  opacity: 1;
  visibility: visible;
}

＆＃13;

<div id="garden_left">
  <figure id="lawn_mower">
    <img src="http://www.kunkel-dienstleistungen.com/dev/img/lawn_mower.png" alt="lawn mower">
    <figcaption>
      <h5>Headline</h5>
      Description with some text
    </figcaption>
  </figure>
</div>

＆＃13;

Answer 1

要在不知道元素宽度的情况下完善中心，最好的是absolute + translate：

figure {
   position: relative;
}
figcaption {
   position: absolute;
   left: 50%;
   -webkit-transform: translateX(-50%); /* Safari iOS */
   transform: translateX(-50%);
}

看到它正常工作：

https://jsfiddle.net/bwank6hz/3/

Answer 2

仅在text-align:center;中使用<figure>将解决此问题

figure {
    margin: 0;
    padding: 0;
    text-align:center;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

无需与left和transform属性对齐

示例：https://jsfiddle.net/bwank6hz/4/

如何将工具提示置于图像上方？

2 个答案: