If you have ever tried to vertically align an image within a line of text these instructions should help.
First you need to set up the CSS file with this class:
.textbottom {vertical-align:text-bottom;}
Then add that class to your image tag:
<img src="images/moreinfo.gif" width="90" height="14" border="0" class="textbottom" alt="portfolio more info tag">
This should align the bottom of the image with the bottom of the text.
.textmiddle {vertical-align:middle;}
Text aligned to the top of the image:
.texttop {vertical-align:top;}
Text aligned to the baseline of the image:
.textbaseline {vertical-align:baseline;}
Here is the class I used for those blue buttons:
.bluebtn { background-image: url(images/bluebtn.gif);
background-repeat: no-repeat;
width:20px;
height:19px;
float:left;
margin: 0;
padding: 0 5px 0 0; }
And here is the code that goes before each Header tag:
<div class="bluebtn"> </div>
Align images with bottom of text:
This CSS tip aligns the bottom of the image with the bottom of the text.First you need to set up the CSS file with this class:
.textbottom {vertical-align:text-bottom;}
Then add that class to your image tag:
<img src="images/moreinfo.gif" width="90" height="14" border="0" class="textbottom" alt="portfolio more info tag">
This should align the bottom of the image with the bottom of the text.
Other image postions
Text aligned to the middle of the image:.textmiddle {vertical-align:middle;}
Text aligned to the top of the image:
.texttop {vertical-align:top;}
Text aligned to the baseline of the image:
.textbaseline {vertical-align:baseline;}
Aligning Buttons Next to Header tags
The blue buttons on the CSS tips main page next to a header tag also need some special formatting to get them to line up correctly. Vertical-align didn't work on the button image because the header is a block element. I had to set the header up as display:inline and then it worked.Here is the class I used for those blue buttons:
.bluebtn { background-image: url(images/bluebtn.gif);
background-repeat: no-repeat;
width:20px;
height:19px;
float:left;
margin: 0;
padding: 0 5px 0 0; }
And here is the code that goes before each Header tag:
<div class="bluebtn"> </div>
Return to CSS TIPS
Copyright © 2007 Updated 4-12-13
Lori's Web Design
All Rights Reserved


