CODEWITHSUNDEEP
htmlcssvertical-alignment
Kobi
Kobi

Reputation: 137997

How to vertically align an image in unknown size to the center of a div?

I have a simple HTML button which contains text and an image:

HTML: (Already on http://jsfiddle.net/EFwgN)

<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle;}
span.Button img {vertical-align:middle;}

I can't come up with a combination that would fit these requirements:

Here's a jsfiddle with my current code: http://jsfiddle.net/EFwgN
(note the small icon is slightly below the center of the button)

Upvotes: 10

Views: 7718

Answers (6)

kizu
kizu

Reputation: 43214

A simple solution, if you need no less than IE8 (in Standards mode): http://jsfiddle.net/kizu/EFwgN/31/

Just add margin: -100px 0 to img, so the negative margin would eat any large height:

span.Button img {vertical-align:middle; margin:-100px 0;
                 position:relative; top:-2px;}

I've added position: relative; top:-2px; just to look it better :)

But if you'll need support for compatibility mode or IE lt 8 (for some reason), the thing with margin won't work. So you'll need an extra markup: http://jsfiddle.net/kizu/EFwgN/28/, but it's somewhat hacky and works only with the fixed button's height (like in your example).

Upvotes: 4

IOrlandoni
IOrlandoni

Reputation: 1828

How about... this?

http://jsfiddle.net/92K8J/

Added display:inline-block to the images, and removed the fixed heightof the container.

Upvotes: 0

Itai Sagi
Itai Sagi

Reputation: 5615

There you go, using jQuery:

$(".button img").load(function()
          {
              $(this).each(function()
                           {
                               sh = $(this).outerHeight();
                               if (sh > 24){
                               alert(sh);
                              $(this).css("margin-top", - (sh - 24) / 2 + 'px');
                              }
                           });
          });

Edit: Just saw that you wanted it pure CSS, well, here's to the code gulfers out there! :)

Upvotes: 1

shanethehat
shanethehat

Reputation: 15560

Use table-based display. Requires shrinking of image due to conflict between display:table-cell; and height:24px. Very similar to your aborted attempt from the comments, but includes the required display:block; on the image: http://jsfiddle.net/shanethehat/5ck3s/

Upvotes: 1

CodeVirtuoso
CodeVirtuoso

Reputation: 6438

I probably missed some of the requirements, as setting span.Button's height to auto did the trick for me.

If what you wanted is button growing only horizontally, with vertical overflow cropped, than maybe I'd do it like this:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
             vertical-align:middle;
             }

using a bit of javascript to determine img height, and then center it accordingly.

Upvotes: 0

ANeves
ANeves

Reputation: 6365

Why not make the image shrink in the case where it is indeed taller than the button?

span.Button img {
  vertical-align:middle;
  max-height: 100%;
}

Upvotes: 0

Related Questions