如何相对于自身而不是父元素缩放元素？答案

【问题标题】：How to scale an element in relation to itself instead of to the parent element?如何相对于自身而不是父元素缩放元素？
【发布时间】：2021-12-15 02:43:36
【问题描述】：

目前，我正在尝试在导航栏中制作图像的工具提示，但我不知道如何将其居中。本质上，我在 mynavbar 中有一个 div，并且我有悬停时出现的工具提示。我希望工具提示的位置使工具提示的中心与 div 中图像的中心对齐。问题是我不能使用“left:50%”，因为它指的是父导航栏宽度的 50%，即 100%。这会将工具提示定位在整个屏幕的中间，而不是 div 的中间。有什么办法可以阻止它引用父宽度，而是让它自己宽度的 50%？我已经在这里添加了我的代码，也在 jsfiddle 中添加了代码

*{
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body{
  background-color:rgb(80,155,192);
}

header{
    display: grid;
    grid-template-columns: 25% 20% 5% 5% 20% 25%;
    /*                     1   2   3  4   5   6*/
    justify-content: center;
    align-items: center;

    width: 100%;
    background-color: white;
    position: sticky;
    top: 0;
    z-index:1;
}

header h1{
    grid-column: 1;
    margin-left: 5%;
    padding:10px;
    font-size: 40px;
    font-weight: 500;
    color:rgb(80,155,192);
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header h1:hover{
    color: black;
}
header h1 a:visited{
    color:rgb(80,155,192);
}

.water-container{
    grid-column: 3;
    background:gray;
}
.water-container:before,
.water-container:after{
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
}
.water-container:before{
    content: attr(title);
    color:white;
    padding:0.5rem;
    border-radius: 0.3rem;
    background: #333;
}
.water-icon{
    display: block;
    margin:auto;
    width:3rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: center;
}
.water-icon:hover{
    transform: scale(1.2);
}

.fairy-container{
    grid-column: 4;
}
.fairy-container:hover:after{
    content: attr(data-tooltip);
}
.fairy-icon{
    display: block;
    margin:auto;
    width:3rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: center;
}
.fairy-icon:hover{
    transform: scale(1.2);
}

nav {
    grid-column: 6;
}

.nav_links li{
    display: inline-block;
    margin-inline: 30px;
}

.nav_links li a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    width: 100px;
    height: 40px;
    border-radius: 50px;
    background-color: rgb(80,155,192);
    color: white;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
}
.nav_links li a:hover{
    background-color: rgb(60, 136, 173);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
        <h1><a href="main.html">asdasd</a></h1>

        <div class="water-container" title="water">
            <img src="graphics/water.png" class="water-icon" alt="water icon">
        </div>

        <div class="fairy-container" data-tooltip="fairy">
            <img src="graphics/fairy.png" class="fairy-icon" alt="fairy icon">
        </div>

        <nav>
            <ul class="nav_links">
                <li><a href="">Why?</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

here is the fiddle code

顺便说一句，我知道代码中的其他问题，我可以修复它们。我只是对这件事感到困惑，我不知道如何解决。谢谢！

【问题讨论】：

如果你的 jsfiddle 重现了这个错误会更容易。你能解决它吗？
对不起！让我更好地澄清这个问题。在小提琴中，工具提示出现在“水图标”div（我以灰色突出显示）的右侧。我希望工具提示以该 div 为中心。工具提示（深灰色并显示“水”）必须稍微靠左才能居中。
CSS transform 的翻译与元素自身的大小有关

标签： javascript html css web

【解决方案1】：

要引用其父宽度，您必须使用 position: absolute; 并引用它自己， position: relative;

【讨论】：