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
Post a Comment