Prior to this, for line-height and vertical centering problems, often encountered.
For example, when the picture and span are in the same box, there are various offsets. To achieve the desired effect is really a variety of difficult.
Have time, decided to chew a bite seriously.
One line-heigtht:
1. Line-height: As the name implies, the line height refers to the distance between the baseline of the line and the line in the text.
2. Baseline: Here the baseline does not refer to the bottom of the text, but the lower edge of the English letter x.
3 Line spacing: The leading indicates the difference between the height of the text and the high row.
4. Content area: Each element in a row has a fast content area, primarily determined by the size of the font.
5 Inline box: Under default conditions, the inline box is equal to the content area. If the row height is set, the inline box is equal to the row height and white space is added to both sides of the content area.
6 Line box: The row box is equal to the inline box by default, but if the row height in the same row exceeds the height of the inline box for the current element, the current element's row box defaults to the highest row height.
The line boxes here are told only with the highest row height in the line, regardless of the tell-off element. This is also why the picture and the text cannot be aligned on the same row.
7 When there is a picture, the picture will hold the height of the line box to the height of the picture, but at the same time the default mode is the base level alignment.
As shown in the following examples:
Two vertical-align
Vertically centered, one thing to note here is that vertical-align can only be valid for inline elements, which are not valid for block-level elements like div,p.
Need to be centered vertically, just: Vertical-align:middel
Three zoom
It used to be strange how many websites give elements always have to add a zoom:1 style.
Originally all this is to be compatible with IE 6/7/8, is used to trigger IE's haslayout internal attribute. Causes IE to recalculate its own height.
Most of the problems caused by floating and locating bugs can be solved with zoom.
Four Inline-block
The inline property is characterized by inline elements that can be displayed within the same row, but whose height, width, row height, margin,padding, and so on, cannot be set. So the Inline-block is produced;
Inline-block The elements inside the line, but without losing the effect of block. is not fully supported under IE 6/7.
About IE 6/7 for the inline-block of the incomplete support, you can also use the above method to solve.
Such as:
Display:inline-block; *display:inline; Zoom:1; width:80px; height:20px; margin:10px; padding:10px; Text-align:center; Background: #cfc;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">There is a small problem here, the image IMG will have the P element on the top of the 3-pixel space between the action.
Baidu, the original is a bug, the solution is quite a lot
The first is to change doctype for <!doctype html>
Other if you do not change the DOCTYPE can be set to the height of the IMG element, and need to float a bit OK.
. test{ line-height:50px; Flost:left; height:50px; }
Note: This needs to be centered vertically, using the Vertical-align property of the set IMG instead of the text.
Of course this is not absolute, the specific need to see the height of the element is higher, go to set which element of the Vertical-align property.
Of course, one of the lessons of experience is to cut the height of the graph to the singular when transduction. There will be no more 1px problems under such IE6/7.
Line-height and Vertical Center!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
