ホームページ >ウェブフロントエンド >htmlチュートリアル >css3 は、Elements_html/css_WEB-ITnose の水平方向と垂直方向のセンタリングを実装します。
css3 は、Elements_html/css_WEB-ITnose の水平方向と垂直方向のセンタリングを実装します。
- WBOYオリジナル
- 2016-06-21 09:05:341346ブラウズ
css3 は要素の水平方向と垂直方向のセンタリングを実装します。コードは次のとおりです:
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>html,body{ width:100%; height:100%; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box;box-orient: horizontal; box-pack: center; box-align: center;}.main{ width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }.main img{ width:70%; height: 70%;}</style></head><body> <div class="main"> <img src="login-bg.jpg"/> </div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。