Home > Developer > Web Develop
Pure CSS implementation: The Elements in the box are vertically centered, the width and height are fixed or not, except IE5 all browsers are compatible:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <title>Pure CSS implementation: The Elements in the box are vertically centered, the width and height are fixed or not, except IE5 all browsers are compatible</title>6 <style>7 *{margin:0;padding:0; }8 Div{ text-align:Center; background:#f00;width:800px;Height:300px; }9 Div *{ height:100%; Display : Inline-block ; vertical-align : Middle ; }Ten span{ height:auto; background:#fff; } One </style> A </Head> - <Body> - <Div> the <b></b> - <span> -Text-align:center;<BR/> - Vertical-align:middle; + </span> - </Div> + </Body> A </HTML>
Pure CSS implementation: The window element is vertically centered horizontally, the width and height are fixed or not, except IE5 all browsers are compatible:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8" /><title>Pure CSS implementation: The window element is vertically centered horizontally, the width and height are fixed or not, except IE5 all browsers are compatible</title><style>*{margin:0;padding:0; }Html,body{Height:100%; }Body{text-align:Center; }Body *{Height:100%;Display:Inline-block;vertical-align:Middle; }span{ height:auto; *display : inline ;background:#ccc; }</style></Head><Body> <b></b> <span>Text-align:center;<BR/>Vertical-align:middle; </span></Body></HTML>
Pure CSS implementation: Vertical centering, unknown width height, known wide height, except IE5 all browsers are compatible
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
