Square inline button based on element height

Question

I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:

Example

Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.

This is the HTML code:

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

I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.

Is this possible with just CSS, or am I going to have to resort to JavaScript?

Thanks.

I'd really like to know why I've gotten down votes without any reason. — David, Dec 18 '14 at 11:08

Tetaxa · Accepted Answer · 2014-12-18T14:23:39.990

2

Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.

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

.edit img {
    display: block;
}

edited Dec 18 '14 at 14:23

answered Dec 18 '14 at 08:59

Tetaxa

4,375
1
19
25

see the demo. 1em means "whatever the font size is". – Tetaxa Dec 18 '14 at 09:49
ah, so your problem is essentially how to center the image in the box. http://stackoverflow.com/questions/9980531/css-html-center-image-in-div – Tetaxa Dec 18 '14 at 10:35
`display: inline-block;width: 1em; height: 1em;` on the box. – Tetaxa Dec 18 '14 at 10:39

Chan Chun Weng · Answer 2 · 2014-12-18T08:54:30.090

0

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

Is this what you want?

edited Dec 18 '14 at 08:54

answered Dec 18 '14 at 08:26

Chan Chun Weng

876
2
16
32

No, that will only work with one size, it should work with all sizes. – David Dec 18 '14 at 08:33
Did you mean, when the font-size is for example 40pt and you want the edit align centered vertically? – Chan Chun Weng Dec 18 '14 at 08:56
See edited code. I don't know the font size, that's what is dynamic. – David Dec 18 '14 at 09:36

Square inline button based on element height

2 Answers2