<style type='text/css'> .box{ text-align: center; vertical-align: middle; } </style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ obj_center("div_show"); }); function obj_center(obj){ var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#"+obj).height(); var popupWidth = $("#"+obj).width(); //centering $("#"+obj).css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); } </script> <div id='div_show' style='border:2px #f00 solid; width:200px; height:200px;'></div>
<!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" > <head> <style type="text/css"> .box{ width:300px; height:300px; background:red; position:absolute; top:50%; left:50%; margin-top:-150px; margin-left:-150px; } </style> </head> <div class="box"> content in this box </div> <body> </body> </html>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.center = function(init) { var dxcenter = this; if(!init) { dxcenter.css('margin-top', $(window).height() / 2 - this.height() / 2); dxcenter.css('margin-left', $(window).width() / 2 - this.width() / 2); //ถ้ามีการ resize ให้ทำการคำนวนใหม่ $(window).resize(function() { dxcenter.center(!init); }); } else { var marginTop = $(window).height() / 2 - this.height() / 2; var marginLeft = $(window).width() / 2 - this.width() / 2; marginTop = (marginTop < 0) ? 0 : marginTop; marginLeft = (marginLeft < 0) ? 0 : marginLeft; dxcenter.stop(); dxcenter.animate({ marginTop: marginTop, marginLeft: marginLeft }, 250, 'swing' ); } } $(document).ready(function() { $('#wrapper').center(); }); </script> <style> #wrapper { border: 1px solid black; background-color: #E0E0EF; color:#FFFFFF; padding:15px; height:50px; width:650px; text-align:center; } </style> <div id="wrapper"> <div id="my-content"> <h1>อิหยังกะได้..แหม่นบ่อ ...!!</h1> </div> </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <meta name="Author" content="Stu Nicholls" /> <link rel="stylesheet" type="text/css" href="pro_drop_1/pro_drop_1.css" /> <script src="pro_drop_1/stuHover.js" type="text/javascript"></script> </head> <body> <span class="preload1"></span> <span class="preload2"></span> <ul id="nav"> <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li> <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a> <ul class="sub"> <li><a href="#nogo3" class="fly">Cameras</a> <ul> <li><a href="#nogo4">Nikon</a></li> <li><a href="#nogo5">Minolta</a></li> <li><a href="#nogo6">Pentax</a></li> </ul> </li> <li class="mid"><a href="#nogo7" class="fly">Lenses</a> <ul> <li><a href="#nogo8">Wide Angle</a></li> <li><a href="#nogo9">Standard</a></li> <li><a href="#nogo10">Telephoto</a></li> <li><a href="#nogo11" class="fly">Zoom</a> <ul> <li><a href="#nogo12">35mm to 125mm</a></li> <li><a href="#nogo13">50mm to 250mm</a></li> <li><a href="#nogo14">125mm to 500mm</a></li> </ul> </li> <li><a href="#nogo15">Mirror</a></li> <li><a href="#nogo16" class="fly">Non standard</a> <ul> <li><a href="#nogo17">Bayonet mount</a></li> <li><a href="#nogo18">Screw mount</a></li> </ul> </li> </ul> </li> <li><a href="#nogo19">Flash Guns</a></li> <li><a href="#nogo20">Tripods</a></li> <li><a href="#nogo21">Filters</a></li> </ul> </li> <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a> <ul class="sub"> <li><a href="#nogo23">Printing</a></li> <li><a href="#nogo24">Photo Framing</a></li> <li><a href="#nogo25">Retouching</a></li> <li><a href="#nogo26">Archiving</a></li> </ul> </li> <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a> <ul class="sub"> <li><a href="#nogo28">Support</a></li> <li><a href="#nogo29" class="fly">Sales</a> <ul> <li><a href="#nogo30">USA</a></li> <li><a href="#nogo31">Canadian</a></li> <li><a href="#nogo32">South American</a></li> <li><a href="#nogo33" class="fly">European</a> <ul> <li><a href="#nogo34" class="fly">British</a> <ul> <li><a href="#nogo35">London</a></li> <li><a href="#nogo36">Liverpool</a></li> <li><a href="#nogo37">Glasgow</a></li> <li><a href="#nogo38" class="fly">Bristol</a> <ul> <li><a href="#nogo39">Redland</a></li> <li><a href="#nogo40">Hanham</a></li> <li><a href="#nogo41">Eastville</a></li> </ul> </li> <li><a href="#nogo42">Cardiff</a></li> <li><a href="#nogo43">Belfast</a></li> </ul> </li> <li><a href="#nogo44">French</a></li> <li><a href="#nogo45">German</a></li> <li><a href="#nogo46">Spanish</a></li> </ul> </li> <li><a href="#nogo47">Australian</a></li> <li><a href="#nogo48">Asian</a></li> </ul> </li> <li><a href="#nogo49">Buying</a></li> <li><a href="#nogo50">Photographers</a></li> <li><a href="#nogo51">Stockist</a></li> <li><a href="#nogo52">General</a></li> </ul> </li> <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a> <ul class="sub"> <li><a href="#nogo54">Online</a></li> <li><a href="#nogo55">Catalogue</a></li> <li><a href="#nogo56">Mail Order</a></li> </ul> </li> <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li> </ul> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
