css - Fix an image in the middle of the page with HTML -


i not deal html , thought should pretty easy seems not. wanted image , text displayed in middle of page. can align image , text middle horizontally cannot vertically. found solution , wondered why working , if there better way.

code version 1 (not working):

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">    <body>     <div style="width:100%; height:100%; text-align:center">       <img src="http://dummyimage.com/100x50/fc0/000000.png"         style="float:middle">         <br>         hello world!      </div>        </body>   </html> 

although read use tables when table tried:

code version 2 (not working):

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <body>   <table width="100%" border="0" height="100%" align="center">     <tr><td align="center">           <img src="http://dummyimage.com/100x50/fc0/000000.png"         style="float:middle">         <br>         hello world!     </td></tr>       </table>    </body> </html> 

code version 3 (working, why?):

<html>  <body>   <table width="100%" border="0" height="100%" align="center">     <tr><td align="center">           <img src="http://dummyimage.com/100x50/fc0/000000.png"         style="float:middle">         <br>         hello world!     </td></tr>       </table>    </body> </html> 

the following approach centre vertically , horizontally.

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -