How to vertically align inline elements

Question

I have this anchor tag that has text between to be vertically align text. I\'m using this css attribute vertical-align: middle. Nothing happens tho.

Answer 1

vertical-align only works on elements with display: table-cell, and that property value isn't supported in < IE8.

Known text

If you know the text to be centred, it is rather easy. You have two options.

    Example of some lovely

    multiline text.

You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text.

    Example

You can exploit the line-height property to make the text vertically centred. This only works with one line of text. You can guess what happens if there is more than 1.

Dynamic multiline text

Here is where things start to get somewhat tricky, and may have you crying for tables.

Workaround for < IE8.

Source.