1. Jump to content
  2. Jump to end of page
  1. Jump to end of page
  2. Jump to start of page

Weblog

Keep track of changes on this blog by subscribing to our RSS-feed or find out more about syndication.

Usage of vertical align in CSS

Posted by admin on Thursday, October 26th, 2006 at 2:24 pm in code, css, tutorials. No comments.

The other day I wanted to use an image as a submit-button for one of my forms. But to fully comply with web 2.0-standards I also like to have an extra line of text next to my button. I often use this line for a cancel-option, announcing moderation of comments or whatever. But placing a graphic in-line with a line of text is harder than it seems.

example of vertical align applied Refer to the image: when placing the image file directly in-line with the text it aligns to the text baseline. Now this might be want you’re after, but it’s not what I was after. I wanted the caption on my button to align with the text next to it. That’s how I came across this little CSS-trick of vertical-align. Note: perhaps everybody knows vertical-align like their back-pocket, but I don’t. Be happy for my discovery.

Applying vertical-align: middle to my image element made the image align to the middle (*gasp*) of my line of text. Oh, if only I had known this before… As far as I can tell this works fine in Firefox 2, IE7 and Opera 9.

Comments

There are currently 2 comments for this post. Subscribe to this post's comments feed or leave your own comment.

  1. #1 | Bernadette said on September 9th, 2008 at 6:39 am:

    Hi Arjan
    I know this is quite an old post of yours but Im hoping you might be able to help me out a bit further. I m pretty new to CSS and im having the same problem youve talked about here. However when I put in the code you suggested it didnt fix the problem - it just showed vertical-align: middle on the web page. I think I must be missing some other bit of code to make it work properly.

    Id really appreciate your help

    Thanx - Bernadette

  2. #1 | tenshi13 said on October 31st, 2008 at 10:01 pm:

    Dude, u gotta show us at least sum snippet of ur code b4 any1 could help.
    If ur css script appeared on d html view…
    jus mayb I’m guessin ur doin it all wrong

    u’ll need to do sth like

    and remember to enclose the double quote jus to make sure

Leave a comment

Your information

your comment may be held for moderation—be patient.