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

【问题标题】：Square inline button based on element height基于元素高度的方形内联按钮
【发布时间】：2014-12-18 22:50:30
【问题描述】：

我正在尝试完成一个始终为方形的动态按钮，并且基于它所在文本的高度。像这样的：

基本上，图标保持不变，但框的大小会有所不同，具体取决于它旁边的文本大小。图标应垂直和水平居中。为了让它看起来像图像，我必须手动输入所有内容，但无论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？

谢谢。

【问题讨论】：

我真的很想知道为什么我无缘无故地投了反对票。

标签： html css dynamic

【解决方案1】：

这样的事情应该可以做到。您可能需要根据字体稍微更改大小。另外，您可能需要vertical-align它。

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

.edit img {
    display: block;
}

【讨论】：

查看演示。 1em 的意思是“无论字体大小是多少”。
啊，所以你的问题本质上是如何在框中居中图像。 stackoverflow.com/questions/9980531/…
display: inline-block;width: 1em; height: 1em; 在盒子上。

【解决方案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;
}

这是你想要的吗？

【讨论】：

不，它只适用于一种尺寸，它应该适用于所有尺寸。
您的意思是，当字体大小为例如 40pt 并且您希望编辑垂直居中对齐？
查看编辑后的代码。我不知道字体大小，那是动态的。