Why won't vertical-align: middle work? And yet, vertical-align: top does work.
span{
vertical-align: middle;
}<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>This question is related to
html
css
alignment
vertical-alignment
The answer is
Write these span properties
span{
display:inline-block;
vertical-align:middle;
}
Use display:inline-block; When you use vertical-align property.Those are assosiated properties
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
Use line-height:30px for the span so that text is align with the image:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
background:url(../images/red_bullet.jpg) left 3px no-repeat;
I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
Using flex property in css.
To align text vertically center by using in flex using
align-items:center;if you want to align text horizontally center by using in flex usingjustify-content:center;.
div{
display: flex;
align-items: center;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>Using table-cell in css.
div{
display: table;
}
div *{
display: table-cell;
vertical-align: middle;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>You can set image as inline element using display property
<div>_x000D_
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">_x000D_
<span style="vertical-align: middle; display: inline;">Works.</span>_x000D_
</div>Use line-height:30px for the span so that text is align with the image:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
Basically, you'll have to get down to CSS3.
-moz-box-align: center;
-webkit-box-align: center;
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
Firstly inline CSS is not recommended at all, it really mess up your HTML.
For aligning image and span, you can simply do vertical-align:middle.
.align-middle {_x000D_
vertical-align: middle;_x000D_
}<div>_x000D_
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">_x000D_
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>_x000D_
</div>Multiline solution:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Works in all browers and ie9+
On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.
This solution only works if you know the width of your image.
The HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
The CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Because you have to set the line-height to the height of the div for this to work
Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways (Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
and CSS part:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways (Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Multiline solution:
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Works in all browers and ie9+
Write these span properties
span{
display:inline-block;
vertical-align:middle;
}
Use display:inline-block; When you use vertical-align property.Those are assosiated properties
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
<a href="/" title="Home" rel="home">This is my sitename</a>
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
Firstly inline CSS is not recommended at all, it really mess up your HTML.
For aligning image and span, you can simply do vertical-align:middle.
.align-middle {_x000D_
vertical-align: middle;_x000D_
}<div>_x000D_
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">_x000D_
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>_x000D_
</div>Change your div into a flex container:
div { display:flex; }
Now there are two methods to center the alignments for all the content:
Method 1:
div { align-items:center; }
Method 2:
div * { margin-top:auto; margin-bottom:auto; }
Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.
Because you have to set the line-height to the height of the div for this to work
You can set image as inline element using display property
<div>_x000D_
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">_x000D_
<span style="vertical-align: middle; display: inline;">Works.</span>_x000D_
</div>Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;
That's seriously the easiest way.
Using flex property in css.
To align text vertically center by using in flex using
align-items:center;if you want to align text horizontally center by using in flex usingjustify-content:center;.
div{
display: flex;
align-items: center;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>Using table-cell in css.
div{
display: table;
}
div *{
display: table-cell;
vertical-align: middle;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.
This solution only works if you know the width of your image.
The HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
The CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
This code works in IE as well as FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
and CSS part:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.
Because you have to set the line-height to the height of the div for this to work
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
Basically, you'll have to get down to CSS3.
-moz-box-align: center;
-webkit-box-align: center;
You have to apply vertical-align: middle to both elements to have it been centered perfectly.
<div>_x000D_
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">_x000D_
<span style="vertical-align:middle">Perfectly centered</span>_x000D_
</div>The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.
The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).
background:url(../images/red_bullet.jpg) left 3px no-repeat;
I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.
Change your div into a flex container:
div { display:flex; }
Now there are two methods to center the alignments for all the content:
Method 1:
div { align-items:center; }
Method 2:
div * { margin-top:auto; margin-bottom:auto; }
Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.
You have to apply vertical-align: middle to both elements to have it been centered perfectly.
<div>_x000D_
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">_x000D_
<span style="vertical-align:middle">Perfectly centered</span>_x000D_
</div>The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.
The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
This code works in IE as well as FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;
That's seriously the easiest way.
Source: Stackoverflow.com