Tips: How to use CSS to achieve a single line of pictures and text vertically centered

css| Tips

Today in the group to see some friends asked a single line of picture text vertically centered problem, so wrote this article.

This problem is often encountered in the page to do the problem, the first line we first look at the most basic of it!

Select from (CSS authoritative guide)

Vertical-align
Initial value: Baseline (default value)
can inherit: No
Apply to: Inline elements
Description: Vertical-align:baseline aligns the baseline half elements of the element.
Warning: vertical-align cannot affect the alignment of content in a table cell, as is the content in a block element.

The text is not much, but sometimes people are wrong, some people say I used why no effect? First line, take a look at his code.

． Style{vertical-align:middle ...}
Html:<div class= "style" >...<div>

Analysis: From the above code you can see that the error is to apply the style in the block element

We just need to change the style

． Style Img{vertical-align:middle ...}

If there are other inline elements in the style that are written as

． Style Img,.style.input{vertical-align:middle ...}
Or
． Style *{vertical-align:middle ...}
* * Use this wildcard character without affecting other elements.

The above is not set height/row high things, if added height and row high things under FF can support, IE6 below is not fully supported, see the following test results. (in order to increase the apparent effect on the picture suitably increased height)

　　Summary: Vertically centered on a single line of picture text (with pictures)

1. When there is no high row height, we simply apply vertical-align:middle to the elements of the inline; In addition to a picture and the height of the text is similar, do not use this style is also possible.

2. For rows with high or high + height, FF can be correctly displayed, IE6 failure. So you can only use Kack for the following version of IE6! , now IE7 has corrected the error.

3. to 2 to add, you can use the height of the upper and lower filler method, so you can be compatible with IE6.