HTML code <textarea id="temp48199" style="width: 580px; height: 134px" rows="8" cols="19"><Style type = "text/CSS"> <br/> <! -- <Br/> * {margin: 0; padding: 0} <br/> Div {<br/> width: 500px; <br/> Height: 500px; <br/> border: 1px solid #666; <br/> overflow: hidden; <br/> position: relative; <br/> display: Table-cell; <br/> text-align: center; <br/> vertical-align: middle <br/>}< br/> Div P {<br/> position: static; <br/> + position: absolute; <br/> top: 50% <br/>}< br/> IMG {<br/> position: static; <br/> + position: relative; <br/> top:-50%; left:-50%; <br/>}< br/> --> <br/> </style> <br/> <div> <p> </ p> </div> <br/></textarea>
[Ctrl + A select all tips: you can modify some code and then press run]
Method 2: HTML code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> examples of vertical center of images in Div </title> <br/> <style type =" text/CSS "> <br/> <! -- <Br/> body {<br/> margin: 0; padding: 0 <br/>}< br/> Div {<br/> width: 500px; <br/> Height: 500px; <br/> line-Height: 500px; <br/> border: 1px solid #666; <br/> overflow: hidden; <br/> position: relative; <br/> text-align: center; <br/>}< br/> Div P {<br/> position: static; <br/> + position: absolute; <br/> top: 50% <br/>}< br/> IMG {<br/> position: static; <br/> + position: relative; <br/> top:-50%; left:-50%; <br/> vertical-align: middle <br/>}< br/> P: After {<br/> content :". "; font-size: 1px; <br/> visibility: hidden <br/>}< br/> --> <br/> </style> <br/> </pead> <br/> <body> <br/> <div> <p> </P> </div> <br/> </body> <br/> </ptml> <br />
Method 3: HTML code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> examples of vertical center of images in Div </title> <br/> <style type =" text/CSS "> <br/> <! -- <Br/> * {margin: 0; padding: 0} <br/> Div {<br/> width: 500px; <br/> Height: 500px; <br/> line-Height: 500px; <br/> border: 1px solid #666; <br/> overflow: hidden; <br/> position: relative; <br/> text-align: center; <br/>}< br/> Div P {<br/> position: static; <br/> + position: absolute; <br/> top: 50%; <br/> vertical-align: middle <br/>}< br/> IMG {<br/> position: static; <br/> + position: relative; <br/> top:-50%; left:-50%; <br/> vertical-align: middle <br/>}< br/> --> <br/> </style> <br/> </pead> <br/> <body> <br/> <div> <p> </P> </div> <br/> </body> <br/> </ptml> <br />Method 4 (Center for background image) HTML code<textarea id="temp8678" style="width: 582px; height: 134px" rows="8" cols="1"><! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> examples of vertical center of images in Div </title> <br/> <style type =" text/CSS "> <br/> <! -- <Br/> * {margin: 0; padding: 0 ;}< br/> Div {<br/> width: 500px; Border: 1px solid #666; <br/> Height: 500px; <br/> Background: URL ("http://www.google.com/intl/en/images/logo.gif ") center no-repeat <br/>}< br/> --> <br/> </style> <br/> </pead> <br/> <body> <br /> <div> </div> <br/> </body> <br/> </ptml> <br/></textarea>
[Ctrl + A select all tips: you can modify some code and then press run]
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
