Despite the vertical-align feature of CSS, it cannot effectively solve the vertical center problem of unknown height (in the case of text or images with unknown heights in a div label ).
Standard browsers such as Mozilla, opera, and safari ., you can set the display mode of parent-level elements to table (display: Table;) and the internal sub-elements to table-cell (display: Table-cell ), vertical-align features are used to center vertices vertically, but non-standard browsers do not.
Non-standard browsers can only set the header to 50% in the child element, and then set another element to offset from the top to 50%.CopyCodeThe Code is as follows: body {padding: 0; margin: 0 ;}
Body, HTML {Height: 100% ;}
# Outer {Height: 100%; overflow: hidden; position: relative; width: 100%; Background: ivory ;}
# Outer [ID] {display: Table; position: static ;}
# Middle {position: absolute; top: 50%;}/* For explorer only */
# Middle [ID] {display: Table-cell; Vertical-align: middle; position: static ;}
# Inner {position: relative; top:-50%; width: 400px; margin: 0 auto;}/* For explorer only */
Div. greenborder {border: 1px solid green; Background-color: ivory ;}
XHTML
Copy codeThe Code is as follows: <Div id = "outer">
<Div id = "Middle">
<Div id = "inner" class = "greenborder">
</Div>
</Div>
</Div>
The advantage of the above CSS code is that there is no hacks and the css2 selector # value [ID] that is not supported by IE is used.
Css2 selector # value [ID] is equivalent to selector # value, but Internet Explorer does not support this type of selector. Similarly,. value [Class] is equivalent to. value, which can only be understood by standard browsers.
Test: firefox1.5, opera9.0, ie6.0, and ie5.0 pass.Xmlns = "http://www.w3.org/1999/xhtml">
Default length extended page
1. Open illustrator, create a new file, and draw a rectangle, which is larger than the image you want to import and is filled in white.
2. Select a rectangle and choose Effect> distort & transform> zig zag from the menu, as shown in.
3. Menu: Effect> stylize> drop shadow, as shown in.
1. Open illustrator, create a new file, and draw a rectangle, which is larger than the image you want to import and is filled in white.
2. Select a rectangle and choose Effect> distort & transform> zig zag from the menu, as shown in.
3. Menu: Effect> stylize> drop shadow, as shown in.
Design by forestgan this demonstration uses the creation and sharing authorization-signature and non-commercial use.