基于元素高度的方形内联按钮

Question

我试图完成一个总是正方形的动态按钮，并根据文本的高度来完成。像这样：

基本上，图标保持不变，但框的大小会根据其旁边的文本大小而有所不同。图标应垂直和水平居中。为了使它看起来像图像，我必须手动输入所有内容，但我希望它能够工作font-size是20px，70px还是其他任何内容。基本上，我不知道高度，但它应该起作用是目标，这似乎与网站/网站周围的其他人有所不同。

这是HTML代码：

<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
    <!-- This holds the text -->
    <span>Amy</span>
    <!-- This holds the image, and the anchor is the box. -->
    <a href="#"><img src="/images/edit.png" alt="Edit Name" /></a>
</div>

我已尝试关注this tutorial，但由于某种原因我无法让它发挥作用。我尝试过的所有东西（这里列举的东西太多）要么给我正确的高度，要么给出了错误的宽度，图像的确切尺寸，或图像作为正方形的大小。

这只能用CSS，还是我不得不求助于JavaScript？

感谢。

Answer 1

这样的事情应该这样做。您可能需要根据字体改变一点大小。此外，您可能需要vertical-align。

.edit {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.edit img {
    display: block;
}

Answer 2

DEMO

HTML：

<button>    
 <h2 id="name">
   <span>Amy<a href="#" class="edit">
   <img src="/images/edit.png" alt="Edit Name" /></a></span>
 </h2>
</button>

CSS：

button img {
 vertical-align: middle;
}
h2 {
 font-size:20pt;
}

这是你想要的吗？