First of all: no, this is not a tutorial telling you how to vertically center text or other elements with CSS. If that's what you're looking for, I can't help you (at least, not in this entry). If you're still interested, read on.
I found myself today doing something that I feel happens to often in Web design: wasting precious time going through the different values for the CSS vertical-align property. I would try middle, then baseline, then text-bottom, then back to middle again… and I'm sure that I'm not the only one who does this. All I wanted to do was vertically center a button and a text link, and the whole while I kept thinking to myself "if only I could see all at one time what each of the values would look like, that would make this go so much faster." So, here it is. It's not much, but it should do the job.
Edit: I should have made it clear that the vertical-align is targeting the button only, so where the button appears in relation to the text is how the vertical-align option will display.
Subscribe to the RSS feed
Reader comments